Question

我正在使用角度2构建表单。以下代码可以正常工作。

  <div class="form-group">
    <label for="firstName">First Name</label>
    <input type="text" class="form-control" formControlName="firstName">
    <label 
      class="errorMessage" 
      *ngIf="!this.registrationForm.controls['firstName'].valid" 
      for="firstName">
      First name is required</label>
  </div>

我想简化它的升级，以便我不必做

!this.registrationForm.controls['firstName']

我认为我可以为输入字段分配一个本地引用，如下所示，以减少代码。但它对我不起作用

  <div class="form-group">
    <label for="firstName">First Name</label>
    <input type="text" class="form-control" formControlName="firstName" #firstName>
    <label 
      class="errorMessage" 
      *ngIf="!firstName.valid" 
      for="firstName">
      First name is required</label>
  </div>

这不是正确的方法吗？

Answer 1

删除this，如echonax所述。此外，get()是访问控件的首选方式。

*ngIf="!registrationForm.get('firstName').valid"

您还可以添加一个getter

get firstName() : AbstractControl {
  return this.registrationForm.get('firstName');
}

或将控件分配给变量，甚至在将其添加到FormBuilder以进行绑定之前。

使用本地参考简化HTML代码

1 个答案: