formGroup.get vs formGroup.controls in reactive形式 - 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被设计为通过它来访问目标formcontrol path.并且它更常用于复杂(多层嵌入)情况,这使得从多层嵌入形式获得目标控件变得容易,并且使代码清晰且易于理解.

下面以一个例子,你可以简单地通过访问嵌入FormArray的第一要素this.form.get('test.0'),而不是this.form.controls.test.controls[0]:

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

Answer 2

这个问题与：在模板中使用 Angular Reactive Forms .get() 方法会导致像组件方法一样不必要的方法调用吗？。

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

在控制器中，使用其中一种或另一种应该不会有太大影响。