获取 ngModel 引用的长度

Question

      <input 
            type="text"  
            name="email"
            placeholder="Identifiant (Adresse e-mail)"
            [(ngModel)]="account.email" 
            #email="ngModel" 
            required
            pattern="^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$"
        />
        <div *ngIf="email.touched && !email.valid && email.length > 0 " >Cette adresse email n'est pas valide.</div>

我有email，是对输入的引用。如果用户touch输入和输入的长度为> 0，我想显示文本，但我无法访问输入长度。好像电子邮件。长度不起作用。

我该怎么做？谢谢。

Answer 1

当您引用输入元素时，使用email.touched是正确的，但是如果要检查电子邮件长度，则应这样使用：

email.value.length

或：

account.email.length

Answer 2

使用maxlength，错误将显示如果电子邮件超过这种情况下的大小10，则示例：

：

<input 
        type="text"  
        name="email"
        maxlength="10"
        placeholder="Identifiant (Adresse e-mail)"
        [(ngModel)]="account.email" 
        #email="ngModel" 
        required
        pattern="^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$"
    />
<div *ngIf="email.touched && !email.valid && email.errors.maxlength" >Cette adresse email n'est pas valide.</div>