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>

Angular2：使用md-input进行验证

1 个答案: