我在这里管理表单和信息的方式可能完全错了。如果是这样，对不起每个人，但我有点迷失在这里...
这是我的表格：
private tpForm = this.fb.group({
name: [null, Validators.required],
vat: [null, Validators.required],
activityNumber: [null],
addresses: this.fb.array([
this.createAddress()
])
});
constructor(private fb: FormBuilder) { }
createAddress(): FormGroup {
return this.fb.group({
street: [null, Validators.required],
streetComp: [null],
streetComp2: [null],
city: [null, Validators.required],
cp: [null, Validators.required],
state: [null],
country: [null, Validators.required]
});
}
重要的旁注：
因为它来自生成表格的服务，该表格适用于不同的模型。 但是您会了解表单的整体结构。
我的目标是如有必要，可以添加多个address，每个address是FormGroup对象，因为它本身就是一种形式
问题是，我似乎无法访问本身嵌套在FormArray中的FormGroup中包含的控件：
<mat-card-content>
<mat-grid-list cols="3" rowHeight="1.2:1">
<form [formGroup]="tpForm" (ngSubmit)="onSubmit()">
<mat-grid-tile formGroupName="tpForm"> //<--- Here I'm trying to divide the access to the controls (name, vat, activityNumber) this one gives me an error (see below)
<mat-form-field appearance="outline">
<mat-label>Customer VAT Number</mat-label>
<input matInput formControlName="vat">
<mat-error *ngIf="tpForm.get('vat').invalid">Please enter a VAT number!</mat-error>
<mat-icon matSuffix *ngIf="tpForm.get('vat').valid || !editing">sentiment_very_satisfied</mat-icon>
<mat-hint>Customer's local VAT number</mat-hint>
</mat-form-field>
<button style="margin: 0.5rem;" mat-raised-button type="button" color="accent" (click)="onLoadInfo()" [disabled]="tpForm.get('vat').invalid || !editing">Load information</button>
<mat-form-field appearance="fill">
<mat-label>Customer name</mat-label>
<input matInput formControlName="name">
<mat-error *ngIf="tpForm.get('name').invalid">Please enter the customer's name</mat-error>
<mat-icon matSuffix *ngIf="tpForm.get('name').valid || !editing">sentiment_very_satisfied</mat-icon>
<mat-hint>Has to match the customer full legal name</mat-hint>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Customer Activity Reference</mat-label>
<input matInput formControlName="activityNumber">
<mat-icon matSuffix *ngIf="tpForm.get('activityNumber').value">sentiment_very_satisfied</mat-icon>
<mat-hint>Customer's local activity reference (INSEE, CNAE...)</mat-hint>
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile formGroupName="tpForm.get('addresses')[0]">//<--- So that I can get the controls from the addresses here
<mat-form-field appearance="fill">
<mat-label>Street</mat-label>
<input matInput formControlName="street">
<mat-icon matSuffix *ngIf="tpForm.get('addresses')[0].get('street').value">sentiment_very_satisfied</mat-icon>
<mat-hint>Customer's local activity reference (INSEE, CNAE...)</mat-hint>
</mat-form-field>
</mat-grid-tile>
</form>
</mat-grid-list>
</mat-card-content>
就目前而言，我对此并不感到惊讶。所有这些都会产生以下错误：
ERROR Error: Cannot find control with name: 'tpForm'
指向我的代码行（请参见注释）<mat-grid-tile formGroupName="tpForm">
我在翻译中有些困惑，很乐意您提供有关如何处理此问题的意见。 提前非常感谢！
答案 0 :(得分：2)
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="dd-15" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="../Cote_d_Azur/Cogolin/index.htm">Cogolin</a>
<ul class="dropdown-menu" aria-labelledby="dd-15">
<li><a class="nav-link" href="../Cote_d_Azur/Cogolin/Grimaud/index.htm">Grimaud</a></li>
<li><a class="nav-link" href="../Cote_d_Azur/Cogolin/PortGrimaud/index.htm">Port Grimaud</a></li>
</ul>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="dd-16" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="../Cote_d_Azur/Les_Tournels/index.htm">Les Tournels</a>
<ul class="dropdown-menu" aria-labelledby="dd-16">
<li><a class="nav-link" href="../Cote_d_Azur/Les_Tournels/CapCamarat/index.htm">Cap Camarat</a></li>
<li><a class="nav-link" href="../Cote_d_Azur/Les_Tournels/Ramatuelle/index.htm">Ramatuelle</a></li>
<li><a class="nav-link" href="../Cote_d_Azur/Les_Tournels/Pamplonne/index.htm">Plage de Pamplonne</a>
</li>
<li><a class="nav-link" href="../Cote_d_Azur/Les_Tournels/Cap-Taillat/index.htm">Cap-Taillat</a></li>
</ul>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="dd-17" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="../Cote_d_Azur/LeDramont/index.htm">Le Dramont</a>
<ul class="dropdown-menu" aria-labelledby="dd-17">
<li><a class="nav-link" href="../Cote_d_Azur/LeDramont/Agay/index.htm">Agay</a></li>
<li><a class="nav-link" href="../Cote_d_Azur/LeDramont/Esterel/index.htm">Estérel gebergte</a></li>
<li><a class="nav-link" href="../Cote_d_Azur/LeDramont/RondLeDramont/index.htm">Rond Cap du Dramont</a></li>
</ul>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="dd-18" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="../Cote_d_Azur/Le_Bar-sur-Loup/index.htm">Bar-sur-Loup</a>
<ul class="dropdown-menu" aria-labelledby="dd-18">
<li><a class="nav-link" href="../Cote_d_Azur/Le_Bar-sur-Loup/Gourdon/index.htm">Gourdon</a></li>
<li><a class="nav-link" href="../Cote_d_Azur/Le_Bar-sur-Loup/LeLoup/index.htm">Le Loup</a></li>
<li><a class="nav-link" href="../Cote_d_Azur/Le_Bar-sur-Loup/Le_Bar-sur-Loup/index.htm">Het dorp Bar-sur-Loup</a></li>
</ul>
</li>
</ul>
</li>
那是错误的，因为在名为“ tpForm”的主表单组中没有名为“ tpForm”的表单组。删除无用的<form [formGroup]="tpForm" (ngSubmit)="onSubmit()">
<mat-grid-tile formGroupName="tpForm">
。
formGroupName="tpForm"那也是错的。 tpForm.get（）返回一个表单控件。您必须将表单组的名称传递给formGroupName="tpForm.get('addresses')[0]"
。
您需要类似
formGroupName答案 1 :(得分：1)
您正在尝试访问FormGroup内部的'tpForm'成员。没有那个。
this.fb.group({
**tpForm : this.fb.group({}),** //if you had this it would work.
name: [null, Validators.required],
vat: [null, Validators.required],
activityNumber: [null],
addresses: this.fb.array([
this.createAddress()
])
}）;
您需要了解，不带方括号的formGroupName =“ string” angular会将输入视为纯字符串。使用方括号[formGroupName] =“ objectFromComponent”，角将考虑来自组件对象的输入。
对于FormArray，我建议检查角度导轨，它们可以很好地说明您想要实现的目标。 https://angular.io/guide/reactive-forms#step-2-defining-a-formarray-control