Мне нужна помощь о формах в Angular

Question

Я пытаюсь добавить форму на страницу компонента и хочу добавить некоторый элемент управления форматом даты, который необходимо выполнить, когда пользователь нажимает кнопку submit. Я использую ReactiveFormsModule.

Но следующий код ничего не делает. Он компилируется, но форма отправляется, даже если формат даты не соответствует регулярному выражению в его FormControl.

Что я пропустил?

Обратите внимание, что я новичок в Angular, и это моя первая форма.

Шаблон:

<form [formGroup]="formulaireRechercheDeCohorte" (ngSubmit)="rechercheCohorte()">

<label for="jour-debut-cohorte" class="sr-only">Jour du début</label>

<input type="text" class="form-control" id="jour-debut-cohorte" 
name="periodeDebut" 
[(ngModel)]="criteresRechercheCohorte.datePeriodeDebut"
 formControlName="controleurDateDebutPeriode" />

<button type="submit" class="btn btn-primary">Rechercher</button>

</form>

Controler:

formulaireRechercheDeCohorte: FormGroup;
  controleurDateDebutPeriode: FormControl;

  constructor() {
    this.controleurDateDebutPeriode = new FormControl(Validators.pattern(/^\d{1,2}\.\d{1,2}\.\d{4}$/));
    this.formulaireRechercheDeCohorte = new FormGroup({
      "controleurDateDebutPeriode" : this.controleurDateDebutPeriode
    });
  }

rechercheCohorte() {
...call to http service
}

Answer 1

См. Это работает StackBlitz вашего примера

Вам необходимо обновить FormControl, чтобы включить значение, подобное этому this.controleurDateDebutPeriode = new FormControl('' , Validators.pattern(/^\d{1,2}\.\d{1,2}\.\d{4}$/));

Также вы можете добавить атрибут disabled к кнопке отправки, чтобы предотвратить отправку пользователем неправильной формы, например, так.

<button type="submit" [disabled]="!formulaireRechercheDeCohorte.valid" lass="btn btn-primary">Rechercher</button>