각도 2 재료 md 입력 유효성 검사

Question

재료의 md 입력 구성 요소를 각도 2에 사용하고 있습니다. 아직 재료의 알파 버전이지만 압도적으로 요구되는 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> 

나는 'required'를 어떻게 사용할 수 있는가?

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>