[英]Use ngModel directive and value attribute to Update a form
I am trying to edit some data in my MEAN stack app and I am using Reactive Form . 我正在尝试在MEAN堆栈应用程序中编辑一些数据,并且正在使用Reactive Form 。 I am using ngModel two way data binding and HTML input's value attribute.
我正在使用ngModel两种方式进行数据绑定和HTML输入的value属性。 As I am populating my form using value attribute I successfully get the required data from my API into the Input fields but when I click on the Submit Button .
当我使用value属性填充表单时,我成功地从API中将所需的数据获取到Input字段中,但是当我单击Submit Button时 。 Form returns null back and all the fields in my MongoDB gives me null back.This is the method i'm running on submit.
表单返回null返回,而MongoDB中的所有字段都返回null。这是我在Submit上运行的方法。
editPatient() {
const patient = {
first_name: this.first_name,
last_name: this.last_name,
DOB: this.DOB,
email: this.email,
address: this.address,
city: this.city,
province: this.province,
postal_code: this.postal_code,
phone: this.phone,
department: this.department,
doctor: this.doctor
}
this.patientService.updatePatient(this.ID, patient).subscribe((patient: any) => {
console.log(patient);
})}
This is my HTML's single div. 这是我的HTML的单个div。 I have couple more but logic is same in those as well
我还有几对,但逻辑也一样
<div class="form-group" [ngClass]="{'is-invalid':formErrors.first_name}">
<label>First Name</label>
<input type="text" placeholder="First Name" [(ngModel)]="first_name" formControlName="first_name" class="form-control"
(blur)="logValidationErrors()" value={{patient.first_name}} required>
<span class="help-block" *ngIf="formErrors.first_name">
{{formErrors.first_name}}
</span>
</div>
As of now what I think my problem is when i use two way binding it expects value user enters in the input field but it doesn't read/consider what it gets from value attribute as a user input data and returns empties back. 到目前为止,我认为我的问题是当我使用双向绑定时,它期望值用户在输入字段中输入,但是它不读取/考虑当用户输入数据时从value属性中获取的值并返回空值。 This is my deduction if it's true I have no idea how I can bind value attribute to ngModel .
如果是这样,这是我的推论,我不知道如何将value属性绑定到ngModel 。 Is there any other work around possible to achieve this?
是否有其他可行的方法来实现这一目标?
Since you're using the Reactive Forms approach, you should be using just the [formGroup]
, and formControlName
directives on the Template instead of using [(ngModel)]
. 由于您使用的是Reactive Forms方法,因此应该在模板上仅使用
[formGroup]
和formControlName
指令,而不要使用[(ngModel)]
。
You can then get the value of your form using this.yourFormName.value
然后,您可以使用
this.yourFormName.value
获取表单的值。
In your Component Class: 在您的组件类中:
...
constructor(
private fb: FormBuilder,
private patientService: PatientService
) {}
ngOnInit() {
...
this.patientEditForm = this.fb.group({
first_name: [],
last_name: [],
DOB: [],
email: [],
address: [],
city: [],
province: [],
postal_code: [],
phone: [],
department: [],
doctor: []
});
...
}
...
editPatient() {
this.patientService.updatePatient(this.ID, this.patientEditForm.value)
.subscribe((patient: any) => {
console.log(patient);
})
}
...
In your Template: 在您的模板中:
<form [formGroup]="patientEditForm" ...>
...
<div class="form-group" [ngClass]="{'is-invalid':formErrors.first_name}">
<label>First Name</label>
<input type="text" placeholder="First Name" formControlName="first_name" class="form-control"
(blur)="logValidationErrors()" value={{patient.first_name}} required>
<span class="help-block" *ngIf="formErrors.first_name">
{{formErrors.first_name}}
</span>
</div>
...
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.