我正在研究Angular Reactive表单，我已经动态地将几个FormControl添加到FormArray中，但是在使用formControlName绑定它们时，我在模板中引用这些FormControls时遇到问题 . 在模板中，我将循环索引变量“i”分配给formControlName但它不起作用 . 通过使用formControlName绑定控件，我得到“没有带路径的表单控件的值访问器” . 这是我的组件类代码：
export class Control {
constructor(public controlType?: string, public label?: string, public required?: boolean, public placeholder?: string,
public options?: string[], public value?: string) { }
}
export class FormComponent implements OnInit {
reviewForm: FormGroup;
constructor(public formService: FormService, public dialog: MdDialog) { }
selectedControl: any = null;
label: string;
ngOnInit() {
this.reviewForm = new FormGroup({
'controlArray': new FormArray([
])
});
}
addControl() {
const myControl: Control = new Control(this.selectedControl.name, this.label, this.isRequired,
this.selectedControl.attributes.value, this.selectedControl.attributes.options, 'null');
var control: FormControl = new FormControl(myControl);
(<FormArray>this.reviewForm.get('controlArray')).push(control);
}
}
它是我组件的模板：
<form [formGroup]="reviewForm" (ngSubmit)="onSubmit()">
<div class="example-label">
<span class='block'>
<span *ngIf="selectedForm">
<h2 class="example-heading">{{displayForm}} </h2>
</span>
<div formArrayName="controlArray">
<div *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">
<table>
<tr>
<span *ngIf="control.value">
<td>
<label>{{control.value.label}}</label>
</td>
<td><span *ngIf="control.value.controlType == 'select'">
<md-select placeholder="{{control.value.label}}" [formControlName]="i" >
<md-option *ngFor="let option of control.value.options; let i=index"
[value]="option">{{control.value.options[i]}}</md-option>
</md-select>
</span></td>
<td> <span *ngIf="control.value.controlType == 'text'">
<md-form-field class="example-full-width">
<input mdInput type="text" placeholder="{{control.value.placeholder}}" [formControlName]="i" >
</md-form-field>
</span></td>
<td> <span *ngIf="control.value.controlType == 'radio'">
<md-radio-group>
<span *ngFor="let option of control.value.options">
<md-radio-button name="gender" value="{{option}}" [formControlName]="i" >{{option}} </md-radio-button>
</span>
</md-radio-group>
</span>
</td>
<td> <span *ngIf="control.value.controlType == 'checkbox'">
<md-checkbox value="{{control.value.controlType}}" [formControlName]="i" > </md-checkbox>
</span></td>
<td> <span *ngIf="control.value.controlType == 'textarea'">
<textarea name="Comment" id="" cols="30" rows="10" [formControlName]="i" ></textarea>
</span></td>
<td> <span *ngIf="control.value.controlType == 'button'">
<button md-raised-button value="{{control.value}}" [formControlName]="i" >Button</button>
</span> </td>
</span>
</tr>
</table>
</div>
</div>
</span>
</div>
</form>
在我的组件类中，我在FormGroup中只有FormArray . 在addControl函数中，我创建了一个自定义控件，并将此控件作为第一个参数传递给FormControl . 然后我将这个FormControl推送到我的FormArray中 . 请帮助，在模板中如何将formControlName与FormControls关联 . 谢谢
3 回答
你可以用这种方式绑定：
你应该做这样的事情 . 将 [formGroupName]=i 添加到已添加formArray的下一个div . 因此Angular知道正确的遍历 . 希望这可以帮助 . 我之前有过同样的问题，这个修复对我有帮助
<div formArrayName="controlArray"> <div [formGroupName]=i *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">我有同样的问题，并在组件类中使用getter解决了它 .
注意转换为FormArray，否则getter返回AbstractControl，您无法访问任何数组属性或函数 .
然后在模板中你可以做这样的事情 .