角反应形式的填充/修补值 [英] Populating/patching values of angular reactive forms
问题描述
我目前正在使用angular 4进行Crud应用程序开发，我想知道如何用打开表单的按钮将同一行中已解析的数据填充到我的反应式表单中，该表单位于ngx内-bootstrap modal，它应该与我在另一个按钮上添加新项目/对象时使用的相同吗?
I'm curently working on crud application using angular 4, I'm wondering, how can I populate my reactive form with the data that's been parsed in the same row with the button that opens up the form, form is inside ngx-bootstrap modal and it should be the same one I have on the other button for adding new item/object?
这是代码，希望我能正确地向您介绍我的问题...
Here's the code, I hope I can present my problem to you properly...
我应该注意，我有一个用于添加新员工的工作表单，并且想使用相同的表单，但想用我单击/编辑按钮所在的行的对象的值填充该表单...(抱歉缺乏更好的解释) 所以我有一类我的对象
I should noted that I have a working form for adding new employee, and want to use same one but want to populate the form with the values of the object I click on/row where the edit button is... (sorry for the lack of better explanation) So I have a class of my object
export class employee {
UserId: string;
FirstName: string;
LastName: string;
Email: string;
}
在我的app.component.ts中，我有
In my app.component.ts I have
ngOnInit() {
// populates table with current users in database onInit
this.LoadAllEmployees();
this.form = this.formBuilder.group({
FirstName: [null, [Validators.required, Validators.minLength(2)]],
LastName: [null, Validators.required],
Email: [null, [Validators.required, Validators.email]],
});
}
onSubmit() {
if (this.form.valid) {
console.log("Form Submitted!", this.form.value);
this.form.reset();
this.modalRef.hide();
}
else {
this.validateAllFormFields(this.form)
}
}
Save(myForm: NgForm) {
this.GetDemoObject(myForm);
this.AddEmployee(this.Demoemployee);
}
GetDemoObject(myForm: NgForm): employee {
this.Demoemployee = new employee;
this.Demoemployee.FirstName = myForm.value.FirstName;
this.Demoemployee.LastName = myForm.value.LastName;
this.Demoemployee.Email = myForm.value.Email;
return this.Demoemployee;
}
在我的app.component.html中，有一个表和ngx-bootstrap调用
In my app.component.html there's a table and ngx-bootstrap call
<table style="width:100%" class="table table-striped"
id="billing_history_table">
<thead class="head">
<tr>
<th>Employee Name</th>
<th>Mail</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let e of employeelist; let i = index ">
<td>{{e.firstName + ' ' +e.lastName}}</td>
<td>{{e.positionId}}</td>
<td>{{e.email}}</td>
<td><a (click)="openModal(template)"><span class="glyphicon
glyphicon-edit"></span></a></td>
</tr>
</tbody>
</table>
</div>
<ng-template #template>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
label="Close" (click)="modalRef.hide()"><span aria-hidden="true">×
</span></button>
<h4 class="modal-title" id="myModalLabel">Add new user</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" [formGroup]="form" #myForm="ngForm"
(ngSubmit)="onSubmit(myForm.value)">
<div class="form-group" [ngClass]="displayFieldCss('FirstName')">
<label for="FirstName" class="control-label required">First
name</label>
<input type="text" id="FirstName" class="form-control"
formControlName="FirstName">
<app-field-error-display
[displayError]="isFieldValid('FirstName')"
errorMsg="First name is not valid!">
</app-field-error-display>
</div>
<div class="form-group" [ngClass]="displayFieldCss('LastName')">
<label for="LastName" class="control-label required">Last
name</label>
<input type="text" id="LastName" class="form-control"
formControlName="LastName">
<app-field-error-display
[displayError]="isFieldValid('LastName')"
errorMsg="Last name is not valid!">
</app-field-error-display>
</div>
<div class="form-group" [ngClass]="displayFieldCss('Email')">
<label for="Email" class="control-label
required">Email</label>
<input type="text" id="Email" class="form-control"
formControlName="Email">
<app-field-error-display
[displayError]="isFieldValid('Email')"
errorMsg="Email is not valid!">
</app-field-error-display>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal" (click)="modalRef.hide()">Close</button>
<button type="submit"
class="btn btn-primary" (click)="Save(myForm)">
Submit
</button>
</div>
</form>
</div>
</div>
</ng-template>
任何人都可以给我一些指导，类似事物的示例或任何建议吗……
推荐答案
设置表单的值基本上与创建表单的方式相同.在代码中声明表单字段FirstName: [null, [Validators.required, Validators.minLength(2)]],
Set up the values of a form is basically in the same way as you are creating the form. In your code when you declare the form field FirstName: [null, [Validators.required, Validators.minLength(2)]],
实际上，您要传递的第一个参数是表单字段的初始值(空).您可以使用该方法，从父组件接收您的值，并使用默认值创建表单...
actually the first parameter that you are passing is the initial value of the form field (null). you can use that approach, receiving the values of your from from the parent component and creating the form with default values...
通常，我要做的是通过路由传递用于标识我的对象(对象的ID)的参数，然后从后端或商店中获取真实对象，并根据接收到的参数填充表格
Usually what I do is pass the parameter that identify my object (the id of the object) through the route, then I fetch the real object from the backend or the store and populate the form based on the parameters that I receive
我使用fromControl中的方法 setValue 将值设置为表单字段
I use the method setValue from fromControl to set up the value to the form field
this.userForm.get("name").setValue(user.name)
让我知道是否需要更多信息
let me know if you need more info
问候
这篇关于角反应形式的填充/修补值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
