Angular2 <form> 输入验证答案

【问题标题】：Angular2 <form> input validationAngular2 <form> 输入验证
【发布时间】：2017-07-24 15:30:48
【问题描述】：

我有一个必须输入的字段才能进入下一页无法弄清楚如何验证输入（姓名）...在网上搜索并尝试了各种方法但无济于事...

非常感谢任何帮助...

<form>
  <div>
      <div class="form-group" style="width:50%">
        <label class="label label-info" for="Name">Enter Name:</label>
        <input [(ngModel)]="Name" class="form-control" required type="text" 
        name="Name" id="Name" />
  </div>
  <button kendoButton  id="btnSearch" [primary]="true" 
          (click)="redirect()">Next</button>
</div>
</form>

【问题讨论】：

标签： angular validation angular2-forms ng-required

【解决方案1】：

很简单。我建议制作一个模型驱动的表单。

在您的组件中：

myForm: FormGroup;

constructor(private fb: FormBuilder) {
      // We inject FormBuilder to our component

      // Now, we instantiate myForm with FormBuilder
       this.myForm = this.fb.group({
                name: [null, Validators.required]
            });

  }

在模板中，我们将[(ngModel)]替换为formControlName="name"。

对于您的下一个button，我们将在表单无效时禁用它：[disabled]='!myForm.valid'。

另请注意[formGroup]='myForm' 部分。

<form [formGroup]='myForm'>
  <div>
      <div class="form-group" style="width:50%">
        <label class="label label-info" for="Name">Enter Name:</label>
        <input formControlName="name" class="form-control" required type="text" 
        name="Name" id="Name" />
  </div>
  <button kendoButton [disabled]='!myForm.valid' id="btnSearch" [primary]="true" 
          (click)="redirect()">Next</button>
</div>
</form>

【讨论】：

【解决方案2】：

如果您需要使用Template Driven Forms 而不是Reactive Forms，您可以结合使用template reference variable 并参考ngModel 来观察Name 输入字段中的错误，并执行诸如禁用按钮之类的操作直到有效：

<form>
  <div>
      <div class="form-group" style="width:50%">
        <label class="label label-info" for="Name">Enter Name:</label>
        <input [(ngModel)]="Name" class="form-control" required type="text" 
        name="Name" id="Name" #foo="ngModel" />
      </div>
  <button kendoButton  id="btnSearch" [primary]="true [disabled]="foo.errors" (click)="redirect()">Next</button>
  </div>
</form>

然而，对于较大的表单，validation 在这种方式下会很快变得混乱，因为每个字段都有一个模板引用变量。如果验证和逻辑变得更加复杂，可能值得考虑使用 Reactive Forms。

这是一个 plunker 演示功能。

【讨论】：