Используйте директиву ngModel и атрибут value, чтобы обновить форму - PullRequest
Новая
       14

Используйте директиву ngModel и атрибут value, чтобы обновить форму

0 голосов
/ 24 октября 2018

Я пытаюсь отредактировать некоторые данные в моем приложении стека MEAN и использую Реактивная форма .Я использую ngModel двустороннюю привязку данных и атрибут value ввода HTML.Поскольку я заполняю свою форму с использованием атрибута value , я успешно получаю необходимые данные из своего API в поля ввода, но когда я нажимаю кнопку Submit .Форма возвращает null назад и все поля в моем MongoDB возвращают мне значение null. Это метод, который я запускаю при отправке. 

 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);
})}

Этомой HTML один div.У меня есть еще пара, но логика в них одинакова 

<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>

На данный момент я думаю, что моя проблема в том, что когда я использую двухстороннее связывание, он ожидает ввода значения пользователем в поле ввода, но это не такпрочитайте / рассмотрите, что он получает из атрибута value в качестве данных ввода пользователя и возвращает пустые данные обратно.Это мой вывод, если это правда, я понятия не имею, как я могу связать атрибут value с ngModel .Можно ли как-то еще обойти это?

1 Ответ

0 голосов
/ 24 октября 2018

Поскольку вы используете подход Reactive Forms, вы должны использовать только директивы [formGroup] и formControlName в шаблоне вместо использования [(ngModel)].

. Затем вы можете получить значениевашей формы, используя this.yourFormName.value

В вашем классе компонентов: 

...

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);
    })
}

...

В вашем шаблоне: 

<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>
...