如何在Angular 4中使用更改检测
当我的组件发生更改时,我想触发一个必填字段验证。此组件上有多个必填字段,用户需要填写这些字段才能进入下一页。我的想法是启动我的函数,检查必填字段是否为null或空 我的问题是,我找不到任何关于如何实现这一点的例子。下面是我到目前为止得到的如何在Angular 4中使用更改检测,angular,angular2-forms,Angular,Angular2 Forms,当我的组件发生更改时,我想触发一个必填字段验证。此组件上有多个必填字段,用户需要填写这些字段才能进入下一页。我的想法是启动我的函数,检查必填字段是否为null或空 我的问题是,我找不到任何关于如何实现这一点的例子。下面是我到目前为止得到的 import { Component, Injectable, OnInit, Input, ChangeDetectorRef } from '@angular/core' import { HttpModule } from '@angular/
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;
});
}
}
是否有一个函数在任何更改时被触发,我可以调用它来触发我的函数以检查验证规则?我想说为什么不使用反应式表单而不是更改检测。它很容易实现 您可以使用
验证器轻松实现验证部分,如果验证失败,您可以隐藏“下一步”按钮
更多信息请查看此链接
注意:-为什么要在组件中定义服务。它是共享服务还是组件级别
providers: [carReqFormService]
如果其共享组件超出了您需要在模块级别定义的范围。另一方面,它将创建sperate实例ngDoCheck在Angular对组件执行更改检测时被激发,onChanges在@Input change时被激发,但除此之外什么都没有