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输入验证

回答

相关问题