我很难使用formArray。我们有一个列表类:
TextBox1.Text
只应验证属性值并将其绑定到输入字段。
我们设法显示只读属性(我不知道这是否是正确的方法)。
我们没有设法绑定输入字段(我发现他们不使用 ngModel 的示例,因此我避免使用它)
我们也不知道如何仅为值属性添加验证。
所以这是我的问题:
这是我们的 HTML :
class item {
value: number;
name: string
status: string
}
这就是我们绑定表单的方式:
<div [formGroup]="parentForm">
<div *ngIf="items">
<table>
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Status</th>
</tr>
</thead>
<tbody formArrayName="itemsForm">
<tr *ngFor="let item of parentForm.controls.itemsForm.controls; let i=index">
<td><span>{{ item.value.name }}</span></td>
<td>
<input type="number" [formControlName]="i" tabindex="1" autocomplete="off" /> <!--How do I show the value here?-->
</td>
<td>
<app-status [status]="item.value.status"></app-status>
</td>
</tr>
</tbody>
</table>
</div>
</div>
答案 0 :(得分:2)
您需要在表单数组中使用嵌套表单组。我喜欢在构造函数中注入formbuilder,在这个示例中我用fb
引用它。
所以建立你的表格......
ngOnInit() {
this.parentForm = this.fb.group({
itemsForm: this.fb.array([])
});
// add below to the callback instead after you have received your data!
this.populateForm();
}
和populateForm
:
populateForm() {
const control = <FormArray>this.parentForm.controls['itemsForm'];
// the data you have received, for each object create a form group
this.items.forEach(item => {
control.push(this.initItems(item))
})
}
initItems(item) {
// create a formgroup for each item
return this.fb.group({
value: [item.value, Validators.required], // set required or whatever else
name: [item.name]
status: [item.status]
})
}
然后在你的视图中迭代这个formarray并显示value
的输入字段,其他的可以显示为纯文本:
....
<tbody formArrayName="itemsForm">
<tr *ngFor="let item of parentForm.controls.itemsForm.controls; let i = index" >
<ng-container formGroupName="{{i}}">
<td><input formControlName="value" /></td>
<td>Name: {{item.value.name}}</td>
<td>Status: {{item.value.status}}</td>
</ng-container>
</tr>
</tbody>
....
您也可能想要实际使用变量,您可以为其分配不同的表单控件&#34;路径&#34;而不是使用例如... parentForm.controls.itemsForm.controls
但这只是一个建议:)
答案 1 :(得分:1)
使用FromGroup
,Validators
和FormBuilder
来执行此操作:
myForm: FormGroup;
constructor(fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
name: '', // Put the default value here
status: '',
value: [0, Validators.required] // Or any Validator you would use
});
}
在您的HTML中
<form novalidate (ngSubmit)="yourSubmitFunction" [formGroup]="myForm">
<input type="text" formControlName="value" required>
<!-- and other inputs -->
<!-- remember to match the validators ! (e.g. required tag for required validator) -->
</form>
编辑关于只读字段,只是不要在提交功能上发送它们