Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/27.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何在Angular 4中使用更改检测_Angular_Angular2 Forms - Fatal编程技术网

如何在Angular 4中使用更改检测

如何在Angular 4中使用更改检测,angular,angular2-forms,Angular,Angular2 Forms,当我的组件发生更改时,我想触发一个必填字段验证。此组件上有多个必填字段,用户需要填写这些字段才能进入下一页。我的想法是启动我的函数,检查必填字段是否为null或空 我的问题是,我找不到任何关于如何实现这一点的例子。下面是我到目前为止得到的 import { Component, Injectable, OnInit, Input, ChangeDetectorRef } from '@angular/core' import { HttpModule } from '@angular/

当我的组件发生更改时,我想触发一个必填字段验证。此组件上有多个必填字段,用户需要填写这些字段才能进入下一页。我的想法是启动我的函数,检查必填字段是否为null或空

我的问题是,我找不到任何关于如何实现这一点的例子。下面是我到目前为止得到的

    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时被激发,但除此之外什么都没有