Angular 2材質MD輸入驗證

我使用的是Angular 2的材質的MD輸入組件。我知道它仍然是一個alpha版本的材質，但也許有人可以解釋我如何使用Angular所需的html驗證屬性2與MD - 輸入（它是否實現？）。我已經嘗試過（工作正常）：Angular 2材質MD輸入驗證

<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'？

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

來源

2016-12-13 hellobasti

你想在MD-輸入的控制或只是你想要它應該需要？ –

它應該是必需的。當我使用url.errors.required而不是url.errors時，我得到「無法讀取屬性」的'null'錯誤消息。 – hellobasti

是的，通常情況下，你在TS部分的url中有什麼？通常如果在'md-input'元素中提到'required'，它應該是必需的。 –

在您的TS文件，你應該有：

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：

<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>

來源

2016-12-13 21:26:07

這是反應形式的方法如何使用模板驅動程序的方法？ –

Angular 2材質MD輸入驗證

回答

相關問題