Modal Setup

All form modals should have the following characteristics:

• The first text input should auto focus
• Pressing "enter" submits the form
• Only one primary button

Example HTML for modal form

Notice that the modal-body and the modal-footer are both inside of the form. The submit button is the primary button.

  <div class="modal-header">
    <h4 class="modal-title">Example</h4>
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <form [formGroup]="form" (ngSubmit)="doSomething()">
    <div class="modal-body">
      <div class="form-group">
        <label for="first-input" class="control-label">First Input:</label>
        <input type="text" class="form-control" name="first-input" formControlName="first-input" required #autofocus>
      </div>
      <div class="form-group">
        <label for="second-input" class="control-label">Second Input:</label>
        <input type="text" class="form-control" name="second-input" formControlName="second-input">
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="button btn-secondary btn-sm" (click)="activeModal.close('Close click')">Close</button>
      <button type="submit" class="button btn-sm" [disabled]="!form.valid">Do Something</button>
    </div>
  </form>

Example Component.ts

Make sure to focus the first input in ngOnInit

  @Component({
    selector: 'app-example-modal',
    templateUrl: './example-modal.component.html',
  })
  export class ExampleModalComponent implements OnInit {
    form: FormGroup;
    @ViewChild('autofocus') private elementRef: ElementRef;

    constructor(public activeModal: NgbActiveModal, public fb: FormBuilder) { }

    ngOnInit() {
      this.elementRef.nativeElement.focus();
    }

    doSomething() {
      // Code to submit the form
    }
  }