Angular2：使用md-input進行驗證

Question

我是Angular2的新手。嘗試在窗體中實現驗證。但是，它不適合我。我試過這個

<form #f='ngForm' (ngSubmit)="onSubmit(f.form)"> 
    <md-card> 
    <md-card-content> 
     <div class="frm-ctrl form-group"> 
     <label>Phone Number :</label> 
     <div class="wpr"> 
      <div class="icon"> 
      <i class="fa fa-phone"></i> 
      </div> 
      <md-input ngModel #phonenumber="ngModel" [(ngModel)]="PersonInfo.phonenumber" name="phonenumber" class="ctrl-wpr__ctrl form-group" 
      min-length="4" required></md-input> 
      {{phonenumber.errors | json}} 
     </div> 
     </div> 
    </md-card-content> 
    </md-card> 
</form> 

幫助我，我做錯了。

Answer 1

<md-input ngModel 
      #phonenumber="ngModel" 
      [(ngModel)]="PersonInfo.phonenumber" 
      name="phonenumber" class="ctrl-wpr__ctrl form-group" 
      min-length="4" required></md-input> 

改變這

<md-input #phonenumber="ngModel"    //<<<===removed ngModel 
     [(ngModel)]="PersonInfo.phonenumber" 
      name="phonenumber" 
      class="ctrl-wpr__ctrl form-group" 
      min-length="4" required></md-input> 

顯示錯誤味精你可以使用此代碼，

<div [hidden]="phonenumber.valid || phonenumber.untouched" class="alert alert-danger"> 
     phonenumber is required 
</div>