Angular 2 Material md 输入验证

Question

我正在为 Angular 2 使用 Material 的 md-input 组件。我知道它仍然是 Material 的 alpha 版本，但也许有人可以解释我如何使用 Angular 2 所需的 html 验证属性与 md-input(Is已经实现了吗？)。我已经尝试过这个(效果很好):

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

如何使用“必需”？

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

Answer 1

在你的 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>