Primengカレンダーフォームグループの検証の問題

Question

フォームに検証を作成しようとしています。discountフィールドは空ではなく、値の範囲は0〜100である必要があります。time_fromとtime_toは空にできません。 time_fromとtime_toで検証プロセスを開始できません。私はPrimeNGカレンダーコンポーネントを使用します。私はp-calendarのバリデーションがngModuleでうまく動作することを知りましたが、フォームグループの解決策は見つかりませんでした。

コンポーネント（簡体字）（簡体字）

ngOnInit() { 
    this.buildForm(); 
    } 

    buildForm(): void { 
    this.discountFG = this.fb.group({ 
     discount: new FormControl('', [Validators.required, CustomValidators.range([0, 100])]), 
     time_from: new FormControl('', Validators.required), 
     time_to: new FormControl('', Validators.required) 
    }); 

    this.discountFG.valueChanges 
     .subscribe(data => this.onValueChanged(data)); 
    } 

    onValueChanged(data?: any) { 
    if (!this.discountFG) { return; } 
    const form = this.discountFG; 

    for (const field in this.formErrors) { 
     // clear previous error message (if any) 
     this.formErrors[field] = ''; 
     const control = form.get(field); 

     if (control && control.dirty && !control.valid) { 
     const messages = this.validationMessages[field]; 
     for (const key in control.errors) { 
      this.formErrors[field] += messages[key] + ' '; 
     } 
     } 
    } 
    } 

テンプレート

  <p-calendar formControlname="time_from" [locale]="pl" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true" 
      yearRange="2010:2030" (blur)="setTimeFrom($event)" readonlyInput="true" required></p-calendar> 

      <p-calendar formControlname="time_to" [locale]="pl" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true" 
      yearRange="2010:2030" [minDate]="minDate" readonlyInput="true" required></p-calendar> 

現在の行動：日付をピックアップし、このために、何のイベントがあるされていない場合、バリデータは気付きません値の変化をキャッチするために解雇されました。つまり、onValueChangedはtime_fromとtime_toと言います。これをどうすれば解決できますか？

Answer 1

いくつかの広範なデバッグの後、私は構文エラーのためにフォームが検証されていないことを知りました:(formControlNameは小文字でnと綴られています。コントロールは、値を取得することはありませんし、

を私はPlunkでそれを修正してみました、それは仕事を始め

HTML：。。

<form (ngSubmit)="onSubmit()" [formGroup]="discountFG" class="box-model form-support-margin"> 
    <p-calendar formControlName="time_from" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true" 
      yearRange="2010:2030" (blur)="setTimeFrom($event)" readonlyInput="true"> 

    </p-calendar> 

      <p-calendar formControlName="time_to" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true" 
      yearRange="2010:2030" [minDate]="minDate" readonlyInput="true"></p-calendar> 
    <p></p> 
    <button md-raised-button color="primary" type="submit" [disabled]="!discountFG.valid">Save</button> 
</form> 

Plunker Demo