テンプレート式フォームチェックとフォーム処理実戦

テンプレートフォーム検証

テンプレートフォームのバックグラウンドには応答式のデータモデルのようなものはなく、命令は唯一使用できるものであり、チェッカメソッドを命令にパッケージし、テンプレートで

を使用する必要がある.

テンプレートフォームではangularのデフォルトで定義されている検証器requiredやminlengthなども使用できますが、HTMLのプロパティと競合しないようにnovalidateを使用してブラウザのデフォルトのフォーム検証

を閉じることができます.

  
   ：

    

ngコマンドを使用して1つのコマンド

を生成する.
ng g directive directives/mobileValidator

命令はテンプレートのないコンポーネントであり、コンポーネントはラベルとして使用され、命令はHTMLの属性として

を使用することができる.

前に書いた検査方法を命令に包装し、装飾器にprovidersプロバイダを書き、検査器の包装命令のtokenは固定NG_である.VALIDATORS

携帯番号をチェックする方法を指令

に包装する

import { Directive } from '@angular/core';
import {NG_VALIDATORS} from '@angular/forms';
import {mobileValidator} from '../validator/validators';

@Directive({
  selector: '[mobile]',
  providers:[{provide:NG_VALIDATORS, useValue:mobileValidator ,multi:true}]
})
export class MobileValidatorDirective {

  constructor() { }

}

  
   ：
  
   ：

  
  ：
  
    ：

    

テンプレートフォームには、コンポーネントにプログラミング制御可能なデータモデルがないため、フォーム内の情報を知るには、テンプレート式からコンポーネントコントローラに情報を伝達し、フォームを提出する際に、フォームが有効かどうかを知るためにonSubmitメソッドに

しか伝達できない.

onSubmit(value:any,valid:boolean){
  console.log(valid);
  console.log(value);
}

応答フォームと同様にhasErrorメソッドを使用してエラー情報を表示するが、テンプレートフォームにはformModelプロパティがないためmyFormm.formを使用してhasErrorメソッドを呼び出す

  
   ：
  

    

             
    
    

             6
    
  
  
   ：
  

          mobile
  

  
  ：
  

           6
  
  
    ：

  

    {{myForm.form.getError('equal','passwordsGroup')?.descxx}}
  
    

ステータス属性で表示するかどうかを決定しますが、myFormm.form.get('username').valid||formModel.get('username').untouchedはステータス属性値

を直接取得できません.

テンプレートフォームと応答フォームは異なり、モデルの値と状態の変更は非同期であり、制御が困難であり、これらのプロパティに同期でアクセスするとエラーが報告され、テンプレートフォームでこれらのプロパティにアクセスする場合はinputプロパティを使用して

がバインドされます.

  
   ：
  

    

             
    
    

             6
    
  
  

登録
mobileValid:boolean=true;
mobileUntouched=true;
onMobileInput(form: NgForm) {
if(form){
this.mobileValid=form.form.get("mobile").valid;
this.mobileUntouched=form.form.get("mobile").untouched;
}
}
フォーム処理実戦

実現する必要がある機能処理商品検索フォーム商品名に入力する場合、提示最低3文字入力商品価格に負数を入力する場合、提示商品価格は負数商品カテゴリに表示できないので商品カテゴリ検索をクリックすると、フォームにフィールドが非合法である場合、制御中に何のデータも印刷しない

.

productServiceに新しい方法を追加して、利用可能なすべての商品カテゴリ

を取得します.

getAllCategories():string[]{
  return ["    ","    ","  "];
}

応答フォームによる効果

export class SearchComponent implements OnInit {


  formModel: FormGroup;

  categories: string[];

  constructor(private productService:ProductService) {
    let fb=new FormBuilder();
    this.formModel=fb.group({
      title:['',Validators.minLength(3)],
      price:[null,this.positiveNumberValidator],
      category:['-1']
    })

  }

  ngOnInit() {
    this.categories=this.productService.getAllCategories();
  }

  positiveNumberValidator(control: FormControl): any {
    let value = control.value;
    if (!value) {
      return null;
    }
    let price = parseInt(value);

    if (price > 0) {
      return null;
    } else {
      return { positiveNumber: true }
    }
  }

  onSubmit(): void {
    if (this.formModel.valid) {
      console.log(this.formModel.value)
    }
  }

}
 }

フォームのデータモデルを作成し、データモデルとテンプレートHTML要素を

に接続します.

  

        ：
    
             
  
  

        ：
    
         
  
  

        ：
    
      --    --
      {{category}}