如何在ngModel中使用兩個屬性？

以角度2的形式填充ngModel與類的屬性。但我有2個額外的屬性，例如當用戶填寫電子郵件輸入時我想要兩個屬性獲取此值（電子郵件和用戶名），當填充密碼輸入兩個屬性獲取此值（密碼和confirmPassword）。什麼是它的語法，我試過，但它發送錯誤：如何在ngModel中使用兩個屬性？

<input [(ngModel)]="createuser.pasword;createuser.confirmPassword" name="password" type="password" minlength="6" required>

CREATEUSER是CREATEUSER的對象：

export class CreateUser { 
mail: string; 
UserName: string; 
password: string; 
confirmPassword: string;}

非常感謝你以簡單的方式幫助。

來源

2017-08-27 Amir Gh

不知道，但我認爲這是不支持的。 – micronyks

如果您打算使用電子郵件作爲用戶名，請忽略用戶名字段並將其設置在您的後端中。至於密碼，如果你想用一個輸入字段設置密碼和確認密碼，那麼你的確認密碼字段即使在那裏也沒有意義。使用兩個單獨的字段。 – bgse

我不覺得Angular支持綁定ngModel兩個屬性。但是，完成你的任務是可以通過組合ngModel和(event)象下面這樣：

綁定通過[(ngModel)]郵件屬性。
然後通過使用input事件偵聽將用戶名綁定到郵件。

component.html

<input type="text" [(ngModel)]="mail" (input)="setUserName($event)"> 
<p> 
    mail {{mail}} 
</p> 

<p> 
    username {{UserName}} 
</p>

component.ts

export class CreateUser{ 
    mail: string; 
    UserName: string; 
    password: string; 
    confirmPassword: string; 

    constructor() { } 

    setUserName(event) { 
    this.UserName = event.target.value; 
    // or 
    // this.UserName = this.mail; 
    } 
}

雖然這正常工作，我不明白有必要使用它。正如在上面的評論中所說的，您可以將一個字段留空，然後在後端正確處理它。

來源

2017-08-27 10:18:10

謝謝阿卜杜拉齊茲，是的，你是對的，但我需要在前面做到這一點。 –

思索了一番後，我發現我可以這樣做在TS的組成部分：

this.createuser.mail=this.createuser.UserName; 
this.createuser.confirmPassword=this.createuser.pasword;

來源

2017-08-27 11:46:34

做了這項工作？ –

是的，它成功地運作 –

如何在ngModel中使用兩個屬性？

回答

相關問題