angular5 - 使用 Bootstrap 4 在 Angular 5 中进行响应式(Reactive)表单验证

Question

我正在努力使用 Angular 5 和 Bootstrap 4 开发安全表单。如何在表单提交之前验证表单运行时？请指导或分享有关 Angular 5 中响应式(Reactive)验证的任何文章。我可以在其中学习有关文本、数字、电子邮件、描述等的验证。

这是我在 StackOverflow 上的第一个问题。谢谢。

Answer 1

对于响应式(Reactive)表单，您无需通过模板中的属性添加验证器，而是直接将验证器函数添加到组件类中的表单控制模型中。然后，只要控件的值发生变化，Angular 就会调用这些函数。

这是使用内置验证器在响应式(Reactive)表单中进行表单验证的示例。

typescript 文件:

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>