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

#angular #forms

#angular #формы

Вопрос:

Я пытаюсь добавить форму на страницу компонента, и я хочу добавить некоторый контроль над форматом даты, который должен выполняться, когда пользователь нажимает на 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>

Контроллер:

 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
}

1. Не могли бы вы быть достаточно любезны, чтобы опубликовать строковую версию формата даты, который вы хотите, в сравнении с тем, что вы получаете? Я не знаком с регулярными выражениями. Тем не менее, я хотел бы помочь вам, если смогу.

2. Если вы используете FormGroup -ReactiveForm НЕ используйте [(ngModel)] . новый FormControl(..) — это новый FormControl(значение, валидаторы), — вам даются валидаторы в качестве значения-

3. Но как я могу привязать <input> к модели, если я не использую ngModel?

4. @fruustyl3r, используя formControlName, как вы пишете, но удалите [(ngModel)] . Если вы хотите присвоить значение FormControl, вы можете использовать new FormControl(«your-value», …) . Я думаю, что в официальных документах angular.io/guide/reactive-forms#reactive-forms хорошо бы объяснить:(

5. Спасибо за вашу помощь, теперь я сохраню ссылку на официальные документы в своих избранных 🙂

Ответ №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>

1. Большое вам спасибо, я смог добавить свой элемент управления. У меня есть дополнительный вопрос: возможно ли выполнить проверку формы только при отправке без добавления логического значения типа «formIsSubmitted»?