2017-06-21 68 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实例