2017-06-21 74 views
-1

我希望在組件發生更改時觸發必需字段驗證。該組件上有多個必填字段,需要填寫以便用戶進入下一頁。我的想法是激發我的函數,該函數檢查必填字段是否有空或空。如何在角度4中使用更改檢測

我的問題是,我無法找到任何關於如何實現這個的例子。以下是我迄今得到的。

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; 
      }); 


    } 




} 

是否有一個函數會觸發任何更改,我可以調用我的函數來觸發驗證規則?

+0

只要Angular爲組件執行變更檢測,就會觸發ngDoCheck,@Input變更時會觸發onChanges,但沒有其他 –

回答

0

我會說爲什麼不使用反應式而不是變化檢測。它非常容易實現。

您可以使用Validators輕鬆實現驗證部分,如果驗證失敗,您可以隱藏下一個按鈕。

更多信息檢查此鏈接 https://angular.io/guide/reactive-forms

注: - 爲什麼在你的組件定義服務。它是共享服務還是組件級別?

providers: [carReqFormService] 

如果它的共享組件比你需要在模塊級定義。其他方面,它會創建sperate實例