I am trying to edit some data in my MEAN stack app and I am using Reactive Form . I am using ngModel two way data binding and HTML input's value attribute. 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 . Form returns null back and all the fields in my MongoDB gives me null back.This is the method i'm running on 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. 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. This is my deduction if it's true I have no idea how I can bind value attribute to 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)]
.
You can then get the value of your form using 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.