angular - react 形式的 formGroup.get 与 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 旨在通过其路径 访问目标表单控件。并且更多的用于复杂的(多层嵌入)情况，这样可以很容易的从多层嵌入的表单中获取目标控件，也可以使代码清晰易懂。

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

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