如何通过 formGroupName 直接访问控件答案

【问题标题】：How to access the control directly by its formGroupName如何通过 formGroupName 直接访问控件
【发布时间】：2018-04-28 08:06:58
【问题描述】：

在这个表单中，我必须访问 formControlName="last" 的控件才能显示它的错误。

<div [formGroup]="form">
<div formGroupName="name">
<input formControlName="first" placeholder="First name">
<input formControlName="last" placeholder="Last name">
<span *ngIf="name['controls'].last.invalid">invalid</span>
</div>
<input formControlName="email" placeholder="Email">
<button type="submit">Submit</button>
</div>

此代码引发了未定义的错误“控件”（粗体格式行）。控件可以通过 form['controls'].name['controls'].last.invalid 访问，但是有什么方法可以直接通过它的 formGroupName 访问控件吗？

提前致谢

【问题讨论】：

标签： angular2-forms angular-reactive-forms

【解决方案1】：

试试这个

<div *ngIf="!form.controls.name.controls.last.valid">
       Invalid last name !!
    </div>

【讨论】：

嗨 Veena，form.controls.name.controls.last.valid 有效（也提到了问题）。但我想通过它 formGroupName 来访问控件。
如果有很多由formGroupNames组成的深层嵌套的FormGroups，那么访问它就变得困难了。我们需要通过“form.controls.group1.controls.group2.controls.group3.controls.controlName”来访问它，这非常冗长。这就是我想通过其组名本身访问它的原因。 @Veena 感谢您的回复

【解决方案2】：

你能不能试试下面的sn-p

<span *ngIf="form.get('last').invalid">invalid</span>

【讨论】：

【解决方案3】：

@sravanponugati：我们不能在角度中使用 [formGroup]。试试这段代码

<form [formGroup]="form"> 
<div formGroupName="name"> 
<input formControlName="first" placeholder="First">
<input formControlName="last" placeholder="Last"> 
<span *ngIf="form.controls['name'].controls.last.valid">invalid</s‌pan> 
</div> 
<input formControlName="email" placeholder="Email"> 
<button type="submit">Submit</button> 
</form>

【讨论】：