Question

就像标题中所说的，为什么我的字段值会自动以Ionic 4格式设置在[Object HTMLInputElement]上？

使用表单驱动的验证，我得到了其他没有问题的表单，但是一旦加载组件，该表单就会直接在我的字段中输入[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);
}

为什么以Ionic 4格式在[Object HTMLInputElement]上自动设置字段值？

1 个答案: