[英]Bind form array value in angular reactive form
我有一個更新表單,我想在其中綁定表單數組的字段。 表單數組中有 2 個字段。 其中一個是下拉菜單,另一個是文本字段。 我想讓下拉值不可編輯,而輸入標簽值可編輯。
這是我的組件。html
<hello name="{{ name }}"></hello>
<form [formGroup]="editForm" (ngSubmit)="onSubmit(editForm.value)">
<div class="form-group row">
<label class="col-sm-2 col-form-label">Employees</label>
<div class="col-sm-10 txt-box empInfoBg">
<div formArrayName="CoordinatesInfo">
<div *ngFor="
let itemrow of employeeArray['controls'];
let i = index
" [formGroupName]="i">
<div class="form-group row">
<label class="col-sm-2 col-form-label"
>Employee Name</label>
<div class="col-sm-8 txt-box">
<select
(change)="onChangeEmp($event.target.value)"
type="number"
class="form-control"
formControlName="CoordinateId"
>
<option hidden value=""
>Please Select Employee
</option>
<option
*ngFor="
let emp of employeeArray;
let empIndex = index
"
type="number"
[ngValue]="
empControlElementOfArray(empIndex).get(
'CoordinateId'
).value
"
>
{{ emp.CoordinateName }}
</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"
>Age</label>
<div class="col-sm-8 txt-box">
<input
name="nnnn"
type="text"
onkeypress="return (event.charCode !=8 && event.charCode ==0 ||
(event.charCode >= 48 && event.charCode <= 57))"
formControlName="Age"
class="form-control"
placeholder="Please Enter Age"
/>
</div>
<div class="col-md-2">
<button
type="button"
*ngIf="
editForm.get('CoordinatesInfo')[
'controls'
]
"
(click)="deleteRow(i)"
class="a-btns btn btn-success tab-btn"
>Delete
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</div>
</div>
<hr />
</div>
</div>
<div class="row">
<div class="addButton">
<button
type="button"
(click)="addNewRow()"
class="a-btns btn btn-success tab-btn"
>
Add Emp
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</form>
這是我的 component.ts 文件
editForm: FormGroup;
constructor(
private fb: FormBuilder,
private http: HttpClient,
private router: Router,
private route: ActivatedRoute
) {}
response = {
Id: 73,
EmpName: "Rajesh",
CoordinatesInfo: [
{ CoordinateId: 36, CoordinateName: "Nisha", Age: 25 },
{ CoordinateId: 37, CoordinateName: "nidhi", Age: 29 }
]
};
ngOnInit() {
this.editForm = this.fb.group({
CoordinatesInfo: this.fb.array([])
});
this.empInfo();
}
empInfo() {
console.log(this.response);
this.response.CoordinatesInfo = this.response.CoordinatesInfo.map(el => {
var o = Object.assign({}, el, { isdisabled: true });
this.employeeArray.push(
this.initPrefilledEmpRow(el.CoordinateId, el.Age)
);
console.log(this.employeeArray);
return o;
});
}
initBlankEmpRow() {
return this.fb.group({
CoordinateId: [""],
Age: ["", [Validators.required]]
});
}
initPrefilledEmpRow(CoordinateId: number, Age: number) {
return new FormGroup({
CoordinateId: new FormControl({
value: CoordinateId,
Validators: Validators.required,
disabled: true
}),
Age: new FormControl({
value: Age,
Validators: Validators.required,
disabled: true
})
});
}
get employeeArray(): FormArray {
const name = this.editForm.get("CoordinatesInfo") as FormArray;
return name;
}
empControlElementOfArray(index: number) {
const arrayElem = this.employeeArray.get(index.toString()) as FormGroup;
return arrayElem;
}
initItemRows() {
return this.fb.group({
CoordinateId: [""],
Age: ["", [Validators.required]]
});
}
addNewRow() {
this.employeeArray.push(this.initItemRows());
}
deleteRow(index: number) {
this.employeeArray.removeAt(index);
}
這是我的 stackblitz 鏈接
https://stackblitz.com/edit/angular-nfmavt?file=src/app/app.component.ts
我不知道我在哪里失蹤。 難道我做錯了什么?
您可以使用 disabled 屬性使 select 禁用。 在你的例子中:
<select
(change)="onChangeEmp($event.target.value)"
type="number"
class="form-control"
formControlName="CoordinateId"
[attr.disabled]="true"
>
您可以更改變量的“真”值,並且可以控制該字段的禁用。
您可以在創建表單組時禁用該字段。
例如:
initItemRows() {
return this.fb.group({
CoordinateId: { value: "", disabled: true },
Age: ["", [Validators.required]]
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.