Почему значение моих полей автоматически устанавливается на [Object HTMLInputElement] в моей форме Ionic 4?

Question

Как и в заголовке, любая идея, почему значение моих полей автоматически устанавливается на [Object HTMLInputElement] в моей форме Ionic 4?

У меня есть другие формы, которые не создают проблем при использовании проверки на основе форм, но этанепосредственно введите [Object HTMLInputElement] в мои поля, как только загрузится компонент.

Я попытался установить значение "" безуспешно.

<ion-header>
<ion-title>Connexion</ion-title>
</ion-header>
<ion-card>
   <form #connexionForm (ngSubmit)="connexion(connexionForm)">
     <ion-item>
       <ion-input required type="mail" placeholder="Adresse mail" 
         name="mail" [(ngModel)]="connexionForm.mail" #mail="ngModel"></ion- 
          input>
     </ion-item>
     <ion-item>
       <ion-input required type="password" placeholder="Mot de passe" 
       name="password" [(ngModel)]="connexionForm.password"
       #password="ngModel"></ion-input>
     </ion-item>
     <ion-button ion-button round text-center type="submit" 
     *ngIf="!password.errors?.required && 
     !mail.errors?.required">Connexion</ion-button>
 </form>
</ion-card>

спасибо.

РЕДАКТИРОВАТЬ: кажется, что даже когда я набираю значения в своих полях и отправляю форму, введенные значения остаются [Object HTMLInputElement] ...

Answer 1

Вы используете в качестве ngModel фактическую ссылку на форму + свойство.Если у вас есть переменная с именем connexionForm, вам нужно либо изменить имя этой переменной, либо изменить ссылку на шаблон.Здесь мы меняем ссылку на шаблон формы.Также добавьте ngForm:

<form #myConnexionForm="ngForm" (ngSubmit)="connexion(myConnexionForm.value)">
  <ion-item>
    <ion-input 
         required 
         type="email" <!-- Should be "email", not "mail"-->
         placeholder="Adresse mail" 
         name="mail" 
         [(ngModel)]="connexionForm.mail" 
         #mail="ngModel">
    </ion-input>
  </ion-item>
  <ion-item>
    <ion-input 
       required 
       type="password" 
       placeholder="Mot de passe" 
       name="password" 
       [(ngModel)]="connexionForm.password" 
       #password="ngModel">
    </ion-input>
  </ion-item>
  <ion-button ion-button round text-center type="submit" *ngIf="password.touched 
    && !password.errors?.required && !mail.errors?.required">
    Connexion
  </ion-button>
</form>

TS:

connexionForm = {}; // your variable

connexion(formvalues: any) {
  console.log(formvalues.mail, formvalues.password);
  // you also have your values in "connexionForm"
  console.log(this.connexionForm);
}