一组用户可以有多个元素(用户)。在一个模板中,我迭代这个数组并为每个元素添加一个表单。现在每个表单都绑定(bind)到相同的表单组值。如果我为第一个用户填写表单,所有表单的提交按钮都会启用。如何将每个表单指向唯一的 formGroup 或唯一的变量?
组件:
import { FormControl, FormGroup, Validators, FormBuilder} from '@angular/forms';
...
export class UserComponent implements OnInit {
form: FormGroup;
@input users: any[];
constructor(private _fb: FormBuilder) {}
ngOnInit() {
this.form = this._fb.group({
address: new FormControl('', [Validators.required]),
phone: new FormControl('', [Validators.required]),
});
}
add() {
if (this.form.valid){
// code
}
}
模板:
<div *ngFor="let user if users">
{{user.name}}
<form [formGroup]="form" (ngSubmit)="add()">
<div class="form-group">
<label>Address:</label>
<input formControlName="address" class="form-control">
<label>Phone:</label>
<input formControlName="phone" class="form-control"></input>
</div>
<button type="submit" class="submit" [disabled]="!form.valid">Submit</button>
</form>
</div>
最佳答案
要解决您的问题,您必须按如下方式使用 formArray
:
在组件中:
export class UserComponent implements OnInit {
usersForm: FormGroup;
errorMessage : string;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.usersForm= this.formBuilder.group({
users: this.formBuilder.array([
this.formBuilder.group({
address: [null, [Validators.required]],
phone: [null, [Validators.required]]
})
])
});
}
initUserRow(): FormGroup {
return this.formBuilder.group({
address: [null, [Validators.required]],
phone: [null, [Validators.required]],
});
}
addUserRow(): void {
const usersArray=
<FormArray>this.usersForm.controls['users'];
usersArray.push(this.initUserRow());
}
removeUserRow(rowIndex: number): void {
const usersArray= <FormArray>this.usersForm.controls['users'];
if (usersArray.length > 1) {
usersArray.removeAt(rowIndex);
} else {
this.errorMessage = 'You cannot delete this row! form should contain at least one row!';
setTimeout(() => {
this.errorMessage = null;
}, 4000);
}
}
}
在 View 中:
<form *ngIf="usersForm" [formGroup]="usersForm" (ngSubmit)="createUsers()">
<table class="table table-sm table-bordered">
<thead>
<tr class="text-center">
<th>Address</th>
<th>Phone</th>
<th>Action</th>
</tr>
</thead>
<tbody formArrayName="users">
<tr *ngFor="let item of usersForm.controls.users.controls; let $index=index" [formGroupName]="$index">
<td style="min-width: 120px">
<input class="form-control" type="text" formControlName="address"/>
<div class="text-danger" *ngIf="usersForm.controls['users'].controls[$index].controls['address'].touched
&& usersForm.controls['users'].controls[$index].controls['address'].hasError('required')">
Please enter address!
</div>
</td>
<td style="min-width: 120px">
<input class="form-control" type="text" formControlName="address"/>
<div class="text-danger" *ngIf="usersForm.controls['users'].controls[$index].controls['phone'].touched
&& usersForm.controls['users'].controls[$index].controls['phone'].hasError('required')">
Please enter phone number!
</div>
</td>
<td style="width: 100px">
<button (click)="addUserRow()" class="btn btn-success btn-sm mr-1" type="button"><i class="fa fa-plus"></i></button>
<button (click)="removeUserRow($index)" class="btn btn-danger btn-sm" type="button"><i class="fa fa-times"></i></button>
</td>
</tr>
</tbody>
</table>
</form>
希望现在您的问题能得到解决!
关于angular - 如何在 ngFor 中使用响应式表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51560376/