angular2中的表单验证

Question

我正在创建一个表格，我浏览了多个网站，在这些网站中我发现了如下所示的验证信息，有人可以解释其用途。

      this.form = fbld.group({
        firstname: [''],
        lastname: ['', Validators.required],
        profilename: ['', Validators.required],
        email: ['', Validators.required],
        image: [''],
        phone: ['', phoneValidator],
        street: ['', Validators.required],
        country: [''],
    });

Answer 1

我建议您阅读本文，因为它可以很清楚地说明这一点。 也许你有兴趣在这一个 -我个人更喜欢最后一个选项，因为它涵盖了大部分的需求，更具有可读性。

UPD：

但是，以您的示例为例，您应该在模板中像这样使用它：

<form [formGroup]="form">
  <label>Firstname:</label>
  <input type="text" formControlName="firstname">

  <label>Lastname:</label>
  <input type="text" formControlName="lastname">

  <!-- Other inputs here ...-->

</form>

Answer 2

这是在HTML页面中编写的Importing字段，第一个单引号（（''，Validators.required）在UI部分中输入一些数据将保存在b / w引号中

Answer 3

据我了解。

您已使用反应式表单验证。 有用的地方主要是在条件验证中。

让我们假设。

用户注册表格：

this.form = fbld.group({
        firstname: [''],
        lastname: ['', Validators.required],
        profilename: ['', Validators.required],
        email: ['', Validators.required],
        image: [''],
        phone: ['', phoneValidator],
        street: ['', Validators.required],
        country: [''],
    });

EmployeeRegistration表格，其中街道字段是可选的。

this.form = fbld.group({
            firstname: [''],
            lastname: ['', Validators.required],
            profilename: ['', Validators.required],
            email: ['', Validators.required],
            image: [''],
            phone: ['', phoneValidator],
            street: [''],
            country: [''],
        });

在上述情况下，无需费力即可在不同情况下使用同一视图。