formGroup.get vs formGroup.controls 反应形式 - Angular

Question

使用

选择验证时是否有任何首选方法

myForm.controls['name'].valid
myForm.get('name').valid

因为两者似乎只是在语法上有所不同，但实现了相同的目标。

<label>Name
  <input type="text" formControlName="name">
</label>
<div class="alert" *ngIf="!myForm.controls['name'].valid && myForm.controls['name'].touched">
  {{ titleAlert }}
</div>

与

相同

<div class="alert" *ngIf="!myForm.get('name').valid && myForm.get('name').touched">
  {{ titleAlert }}
</div>

根据我检查的代码，get 有这个代码：

AbstractControl.prototype.get = function (path) { return _find(this, path, '.'); };

我刚开始 Angular，所以专家意见将不胜感激。

Answer 1

正如您所发现的，FormGroup.get 旨在通过其 path 访问目标表单控件。并且更常用于复杂的（多层嵌入）情况，这样可以很容易地从多层嵌入表单中获取目标控件，也可以使代码清晰易懂。

以下面为例，您可以通过this.form.get('test.0')而不是this.form.controls.test.controls[0]访问嵌入FormArray的第一个元素：

this.form = this.formBuilder.group(
  {
    test: this.formBuilder.array(
      [
        ['form control 1 in form array'],
        ['form control 1 in form array'],
        ...
      ]
    )
  }
);

Answer 2

此问题与：。

在模板中，我更喜欢使用 myForm.controls.name 来避免 myForm.get('name') 函数调用。如果字段选择器非常复杂，那么我会将字段存储在组件属性中，这样在模板中它的访问是即时的。

在控制器中，使用一个或另一个并不重要。

formGroup.get vs formGroup.controls 反应形式 - Angular

formGroup.get vs formGroup.controls in reactive form - Angular

angular

angular-reactive-forms