使用bootstrap 4

Question

我正在使用angular 5和Bootstrap 4开发一个安全的表单。如何在表单提交之前验证表单运行时？请引导或分享关于角度5中反应性验证的任何文章。我可以在那里学习有关文本，数字，电子邮件，描述等的验证。

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

Answer 1

对于反应式表单，不是通过模板中的属性添加验证器，而是将验证器函数直接添加到组件类中的表单控件模型中。只要控件的值发生变化，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>