我管理表单和信息的方式可能完全错误。如果是这样，我很抱歉大家，但我有点迷失在这里......
这是我的表格：
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对象，因为它本身就是一种形式。
问题是，我似乎无法访问 FormGroup 中包含的控件，它本身嵌套在 FormArray 中：
<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">
我在翻译中有点迷失，希望您对如何处理这个问题提供意见。 提前非常感谢！
<form [formGroup]="tpForm" (ngSubmit)="onSubmit()">
<mat-grid-tile formGroupName="tpForm">
这是错误的，因为在名为"tpForm"的主表单组中没有任何名为"tpForm"的表单组。删除那个无用的formGroupName="tpForm".
formGroupName="tpForm.get('addresses')[0]"
这也是错误的。 tpForm.get() 返回一个表单控件。您必须将表单组的名称传递给formGroupName。
你需要类似的东西
<div formArrayName="addresses"> <!-- addresses is the name of the form array inside the owning form group tpForm -->
<div [formGroupName]="0"> <!-- 0 is the index of form group inside the owning form array addresses -->
<input formControlName="street"> <!-- street is the name of the form control inside the owning form group 0 -->
您正在尝试访问 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" 角度认为输入是纯字符串。使用括号 [formGroupName] = "objectFromComponent" 角度将考虑来自组件对象的输入。
对于FormArray，我建议检查角度指南，它们解释了您想要很好地实现的目标。 https://angular.io/guide/reactive-forms#step-2-defining-a-formarray-control