web-dev-qa-db-ja.com

エラーメッセージを検証して表示する方法-Angular2Material Design？

私はこの入力を持っています：

<form #f="ngForm" name="productForm">
     <md-input [(ngModel)]="product.price" name="price" required="true" placeholder="Price (USD)"></md-input>
     <div ng-messages="productForm.price.$error" role="alert">
         <div ng-message-exp="['required']">
              Price is required
          </div>
     </div>
</form>

ただし、「価格が必要です」というメッセージは表示されません。

エラーメッセージを適切にフォーマットするにはどうすればよいですか？

価格入力が空の場合、ng-invalidクラスが表示されます。

enter image description here

enter image description here

私が何かを記入するとき： enter image description here

Angularはその中にng-validクラスを注入します。 enter image description here

angular1 md design のようなスタイルにしたいのですが、次のようになります。

enter image description here

angulartypescriptmaterial-designangular-material
5
Vicheanak

うまくいけば、angular2-materialが進化するにつれてこれが追加されますが、現在これを模倣する方法は、dividerColorを設定し、MD-HINTディレクティブを使用することです。例：

<md-input placeholder="Email address"
    #email="ngModel"
    name="email"
    type="text"
    fullWidth={true}
    [(ngModel)]="model.email"
    required
    email
    dividerColor="{{ !email.valid ? 'warn' : 'primary' }}">
    <md-hint [hidden]="email.pristine || email.valid">
        <span [hidden]="email.errors?.required || !email.errors?.email">
            This doesn't appear to be a valid email address.
        </span>
        <span [hidden]="!email.errors?.required">Email address is required.</span>
    </md-hint>
</md-input>
9
user1558224

検証メッセージは、Angular Material version 2.0.0以降で挿入できるようになりました。ドキュメントを確認してください ここ 。

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Email" [formControl]="emailFormControl">
    <mat-error *ngIf="emailFormControl.hasError('pattern')">
      Please enter a valid email address
    </mat-error>
    <mat-error *ngIf="emailFormControl.hasError('required')">
      Email is <strong>required</strong>
    </mat-error>
  </mat-form-field>
</form>
3
Dilshan Liyanage