[英]Getting pre-populated data from reactive form in angular
I was trying to get the data from a reactive form, the data here is pre-populated in the html like this:-我试图从反应式表单中获取数据,这里的数据预先填充在 html 中,如下所示:-
<form [formGroup]="editForm" (ngSubmit)="saveHandler()">
<div *ngFor = "let dataItem of dataItems">
<input type="text" value="{{dataItem.id}}" formControlName="id" placeholder="id">
<strong>Name: </strong>
<input type="text" value="{{dataItem.employee_name}}" formControlName="employee_name" placeholder="name">
<strong>Salary :</strong>
<input type="text" value="{{dataItem.employee_salary}}" formControlName="employee_salary" placeholder="salary">
<strong>Age :</strong>
<input type="text" value="{{dataItem.employee_age}}" formControlName="employee_age" placeholder="age">
<button type="submit">Submit</button>
</div>
</form>
In this code snippet the dataItem is an JSON array from the components with the following fields, now I wanted to pass the data of this form back to the component, I cannot use the value directly from the component that is out of my scenario.在此代码片段中, dataItem是来自具有以下字段的组件的 JSON 数组,现在我想将此表单的数据传递回组件,我无法直接使用来自我场景之外的组件的值。 Here is the dataItem:
这是数据项:
this.dataItems = [{
"id":"1",
"employee_name":"bappi gillu",
"employee_salary":"2147483647",
"employee_age":"9876443"
}];
For the reactive form this is the code in the component file:对于反应形式,这是组件文件中的代码:
this.editForm = new FormGroup({
id : new FormControl(null),
employee_name : new FormControl(null),
employee_salary : new FormControl(null),
employee_age : new FormControl(null),
});
and here is the ngSubmit's saveHandler() :这是 ngSubmit 的saveHandler() :
public saveHandler( ){
const employee = this.editForm.value ;
console.log(employee );
}
I am getting null If the form has the css class ng-untouched although if the css class is ng-touched the value is coming perfectly.我得到 null 如果表单有 css 类ng-untouched虽然如果 css 类是ng-touched值来完美。 Now what I wanted is to submit the data irrespective of the class.
现在我想要的是不分班级提交数据。 Here also is a link for the stackblitz
这里也是stackblitz的链接
Note : The value for the dataItem is coming from an api for this question I had put it this way.注意:dataItem 的值来自这个问题的 api,我是这样说的。
Since dataItems
is an array, you can use formArray
由于
dataItems
是一个数组,您可以使用formArray
Try like this:像这样尝试:
.html .html
<form [formGroup]="editForm" (ngSubmit)="saveHandler()">
<div formArrayName="dataItems" *ngFor="let emp of editForm.get('dataItems').controls; let i = index">
<div [formGroupName]="i">
<hr *ngIf="i>0">
<input type="text" formControlName="id" placeholder="id">
<strong>Name: </strong>
<input type="text" formControlName="employee_name" placeholder="name">
<strong>Salary :</strong>
<input type="text" formControlName="employee_salary" placeholder="salary">
<strong>Age :</strong>
<input type="text" formControlName="employee_age" placeholder="age">
<button type="submit">Submit</button>
</div>
</div>
</form>
.ts .ts
this.dataItems = [
{
id: "1",
employee_name: "bappi gillu",
employee_salary: "2147483647",
employee_age: "9876443"
}
];
this.editForm = new FormGroup({
dataItems: this.fb.array([])
});
this.editForm.setControl( "dataItems", this.setExistingDataitems(this.dataItems) );
}
setExistingDataitems(Dataitemsets): FormArray {
const formArray = new FormArray([]);
Dataitemsets.forEach(s => {
formArray.push(
this.fb.group({
id: s.id,
employee_name: s.employee_name,
employee_salary: s.employee_salary,
employee_age: s.employee_age
})
);
});
return formArray;
}
You can set directly default value in reactive form like:您可以以反应形式直接设置默认值,例如:
this.editForm = new FormGroup({
id : new FormControl(1),
employee_name : new FormControl("bappi gillu"),
employee_salary : new FormControl("2147483647"),
employee_age : new FormControl("9876443"),
});
Now when you submit the form all field value will present in form object现在,当您提交表单时,所有字段值都将出现在表单对象中
Or you can use setValue
method to update the reactive form或者你可以使用
setValue
方法来更新反应形式
this.dataItems = [{
"id":"1",
"employee_name":"bappi gillu",
"employee_salary":"2147483647",
"employee_age":"9876443"
}];
this.updateValues(this.dataItems[0]);
updateValues({id, employee_name, employee_salary, employee_age}: any) {
this.editForm.setValue({
id : id,
employee_name: employee_name,
employee_salary : employee_salary,
employee_age : employee_age
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.