Проверка реактивной формы в angular 5 с бутстрапом 4

Я работаю над разработкой безопасной формы с использованием angular 5 и Bootstrap 4. Как я могу проверить время выполнения формы перед отправкой формы? Пожалуйста, направьте или поделитесь любой статьей, касающейся реактивной проверки в angular 5. Где я могу узнать о проверке текста, номера, электронной почты, описания и т. Д.

Это мой первый вопрос в StackOverflow. Спасибо.


angular-reactive-forms angular5
person academytimes    schedule 11.03.2018    source источник
comment
Почему не дорогой. Я отсылаю к вам это. Думаю, эта статья лучше всего подходит для вашего состояния. Реактивная проверка формы в angular 5 с помощью Bootstrap 4.   -  person Code Lover    schedule 11.03.2018
comment
Как насчет чтения этого руководства: codecraft.tv/courses/angular/forms/reactive -модель-форма   -  person Michael Czechowski    schedule 11.03.2018

Ответы (1)


arrow_upward
2
arrow_downward

Для реактивных форм вместо добавления валидаторов через атрибуты в шаблон вы добавляете функции валидатора непосредственно в модель управления формой в классе компонента. Затем Angular вызывает эти функции всякий раз, когда значение элемента управления изменяется.

Вот пример проверки формы в реактивных формах с использованием встроенных валидаторов.

Файл машинописного текста:

ngOnInit(): void {
  this.heroForm = new FormGroup({
    'name': new FormControl(this.hero.name, [
      Validators.required,
      Validators.minLength(4)
    ]),
    'alterEgo': new FormControl(this.hero.alterEgo),
    'power': new FormControl(this.hero.power, Validators.required)
  });
}

Файл шаблона:

<input id="name" class="form-control"
       formControlName="name" required >

<div *ngIf="name.invalid && (name.dirty || name.touched)"
     class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
</div>
person HMR    schedule 11.03.2018