角度2の材料md入力のバリデーション

Question

材料のmd入力コンポーネントをAngular 2に使用しています。材料のアルファ版ですが、Angularに必要なhtml検証属性の使用方法を教えてくれるかもしれません2でmd-input（まだ実装されていますか？）私はこれを試しました（うまく動作します）：

<md-card> 
    <md-input 
     placeholder="Url" 
     id="url" 
     url="url" 
     [(ngModel)]="urlInputValue" 
     #url="ngModel" 
     required> 
     <md-hint *ngIf="url.errors && (url.dirty || url.touched)" [ngStyle]="{'color': 'red'}"> Url is required </md-hint>    
    </md-input> 

    <button 
     md-raised-button color="accent" 
     [disabled]="isUrlInputEmpty()" 
     (click)="onRequestBtnClick()"> 
     Request 
    </button> 
</md-card> 

どのように私は '必須'を使用できますか？

import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; 

export class UrlComponent { 
    public urlForm: FormGroup; 
    constructor(private formBuilder: FormBuilder) { 

    this.urlForm = this.formBuilder.group({ 
    url: new FormControl('', Validators.required), 
    }); 
    } 
//... codes.. 
} 

をまたにあなたのHTMLを変更します：あなたのTSファイルで

<md-hint *ngIf="url.errors.required && (url.dirty || url.touched)" [ngStyle]="{'color': 'red'}"> Url is required </md-hint> 

Answer 1

あなたが持っている必要があり

<form role="form" [formGroup]="urlForm" novalidate> 
<md-input 
    placeholder="Url" 
    id="url" 
    url="url" 
    [(ngModel)]="urlInputValue" 
    formControlName="url" 
    #url="ngModel" 
    > 
    <md-hint *ngIf="url.errors && (url.dirty || url.touched)" [ngStyle]="{'color': 'red'}"> Url is required </md-hint>    
</md-input> 

<button 
    md-raised-button color="accent" 
    [disabled]="isUrlInputEmpty()" 
    (click)="onRequestBtnClick()"> 
    Request 
</button> 

</form>