角度検出での変更検出の使用方法

Question

コンポーネントで変更が発生した場合、必要なフィールドの検証を実行します。このコンポーネントには、ユーザが次のページに進むために記入する必要がある複数の必須項目があります。私の考えは、それらのいずれかが空であるか空である場合に必須フィールドをチェックする関数を呼び出すことでした。

私の問題は、これを実装する方法の例を見つけることができないということです。以下は私が今までに得たものです。

import { Component, Injectable, OnInit, Input, ChangeDetectorRef } from '@angular/core' 
import { HttpModule } from '@angular/http'; 
import { CarReqFormService } from './carReqForm.service'; 
import { DropDownListItem } from './carReq-dropdownItem'; 
import { IMyOptions, IMyDateModel } from 'ngx-mydatepicker'; 
import { surgeryReservationModel } from './carReservationModel'; 
import { Router, ActivatedRoute, Params } from '@angular/router'; 
import { Location } from '@angular/common'; 
import 'rxjs/add/operator/switchMap'; 
import { AutoCompleteBoxRequest } from './autoCompleteBoxRequest'; 

@Component({ 
    moduleId: module.id, 
    selector: 'uh-carReservationFormPage3', 
    templateUrl: './carReservationFormPage3.html', 
    providers: [carReqFormService] 
}) 



export class carReservationFormPage3Component implements OnInit { 

    SurgicalPositionItems: DropDownListItem[]; 
    private loading: boolean = true; 
    carReservationModel = new carReservationModel(); 
    public isBusy: boolean; 


    constructor(private _carRequestFormService: carReqFormService, 
       private route: ActivatedRoute , 
       private _router: Router, 
       private ref: ChangeDetectorRef) { 

    } 
    ngOnInit(): void { 
     this.getActivecaricalPositions(); 
     this.isBusy = true; 
     var test; 
     this.route.params 
      .switchMap((params: Params) => this._carRequestFormService.getcarRequestById(+params['id'])) 
      .subscribe(
      data => { 
       this.carReservationModel = data; 
       this.isBusy = false; 


      }, 
      error => { 
       console.log("Error", error); 
       this.isBusy = false; 
      }, 
      () => { 
       console.log("Inside NgOnInit on Page 3" + this.carReservationModel.carRequestId); 
       this.isBusy = false; 
      }); 


    } 




} 

私は、検証ルールの上に行くために私の機能を発射するために呼び出すことができます任意の変化にトリガーされます機能はありますか？

Answer 1

なぜ私は変更検出の代わりに反応形式を使用しないのでしょうか。その実装は非常に簡単です。

Validatorsを使用して検証部分を簡単に実装することができます。検証に失敗すると、次のボタンを隠すことができます。

詳細チェックこのリンク https://angular.io/guide/reactive-forms

注： - なぜ、あなたのコンポーネントでサービスを定義しています。共有サービスかコンポーネントレベルか。

providers: [carReqFormService] 

モジュールレベルで定義する必要がある以上の共有コンポーネントの場合。それ以外の場合は、インスタンスが自動的に作成されます。