Я могу полностью ошибаться в том, как я управляю формой и информацией здесь. Если так, извините всех, но я как бы потерялся здесь ...
Вот моя форма:
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">
Я немного заблудился в переводе и хотел бы, чтобы вы рассказали, как с этим справиться. Спасибо заранее!