我正在尝试创建一个音乐会中播放曲目的表,但是在每一行中我都有相同的输入。另外,如果我向数组添加一行,它们将变为空。我发现我应该使用类似formGroupName="{{i}}"
的名称,但是它需要在ts文件中进行硬编码。如何正确制作?
答案 0 :(得分:1)
从代码中我可以发现,您的问题在这里吗?
<tr *ngFor="let a of repertoire;let i = index;trackBy:trackByIndex;">
<th scope="row">{{a.id}}</th>
<td><input type="text" formControlName="title" [(ngModel)]="repertoire[i].title"></td>
<td><input type="text" formControlName="composer" [(ngModel)]="repertoire[i].composer"></td>
<td><button type="button" class="btn btn-danger btn-sm" (click)="deleteMusic(a)">Usuń</button></td>
</tr>
这里显示的表单的定义是这样的:
this.repForm = this.fb.group({
title: ['', Validators.required],
composer: ['', Validators.required]
});
上面的表单结构只能容纳一组值。您需要改为将此结构定义为FormArray。
我在这里用一组地址做类似的事情:
this.customerForm = this.fb.group({
firstName: ['', [Validators.required, Validators.minLength(3)]],
lastName: ['', [Validators.required, Validators.maxLength(50)]],
addresses: this.fb.array([this.buildAddress()])
});
请注意,我将其定义为FormBuilder数组。
然后我像这样添加到该数组:
addAddress(): void {
this.addresses.push(this.buildAddress());
}
buildAddress(): FormGroup {
return this.fb.group({
addressType: 'home',
street1: ['', Validators.required],
street2: '',
city: '',
state: '',
zip: ''
});
}
并以如下方式在HTML中进行访问:
<div formArrayName="addresses"
*ngFor="let address of addresses.controls; let i=index">
<div [formGroupName]="i">
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label"
attr.for="{{'street1Id' + i}}">Street Address 1</label>
<div class="col-md-8">
<input class="form-control"
id="{{'street1Id' + i}}"
type="text"
formControlName="street1">
</div>
</div>
<!-- More here -->
</div>
您可以在此处找到完整的工作示例:https://github.com/DeborahK/Angular-ReactiveForms/tree/master/Demo-Final