Angularフォーム条件簡単な検証機能の追加

2298 ワード

転載先 http://www.ngui.cc/news/show-139.html
フォームコントロールに検証機能を追加するにはどうすればいいですか?
現在のAngularでサポートされている組み込み validators 次のようになります.
required-フォームコントロールの値が空でないを設定します.
Email-フォームコントロールの値を設定するフォーマットはemail です.
minlength-フォームコントロール値の最小長さを設定します.
maxlength-フォームコントロール値の最大長を設定します.
pattern-フォームコントロールの値を設定するにはpattern対応のモードに一致する必要があります.
次に最も簡単な 必須 チェックします.
import { Component } from '@angular/core'; 
@Component({
  selector: 'app-root',
  template: `
    
    {{username}}
  `,
}) 
export class AppComponent {
  username = 'semlinker';
}

フォームコントロールが検証されたかどうかを判断するにはどうすればいいですか?
Angularでは #userName="ngModel" 取得方法 ngModel オブジェクト、そして userName.valid フォームコントロールが検証に合格したかどうかを判断します.
import { Component } from '@angular/core'; 
@Component({
  selector: 'app-root',
  template: `
    
    {{userName.valid}}
  `, }) 
export class AppComponent {
  username = 'semlinker';
}