Question

我想访问表单控件并有条件地禁用某些控件。在以下代码中，该表单没有控件：

Component

export class OfferDialogComponent implements OnInit, AfterViewInit {

    freemium = false;
    @ViewChild('editForm') editForm: NgForm;

    ngAfterViewInit(): void {
        this.editForm.form.get("trialPeriod").disable();
    }
}

Template

<form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">

如何有条件地访问和初始化表单控件？

Answer 1

来自Angular文档

模板驱动的表单将其表单控件的创建委托给   指令。为了避免经过检查的错误后更改，这些指令   需要花费一个以上的周期来构建整个控制树。那意味着   您必须等到下一个变更检测周期到来之前   从组件类中操纵任何控件。

例如，如果您用@ViewChild(NgForm)注入表单控件   在ngAfterViewInit生命周期挂钩中进行查询和检查，您将   发现它没有孩子。您必须触发变更检测   您可以使用setTimeout()循环操作，然后才能从   控制，测试其有效性或将其设置为新值。

修改后的代码：

ngAfterViewInit(): void {
      setTimeOut(()=>{
        this.editForm.form.get("trialPeriod").disable();
});
    }

或者您可以使用ngAfterViewChecked

import { Component ,ViewChild,ChangeDetectorRef} from '@angular/core';
    constructor(private cdRef:ChangeDetectorRef){}
        ngAfterViewChecked()
            {
            if(this.editForm.controls.name)
         this.editForm.form.get("name").disable();

              this.cdRef.detectChanges();//Forcing change detection to avoid ExpressionChangedAfterItHasBeenCheckedError
            }

Answer 2

Define form control 
<input matInput placeholder="Email" [formControl]="emailFormControl">
 
In .ts :-
emailFormControl = new FormControl('default value');

and get value using this.emailFormControl.value

see : https://material.angular.io/components/input/examples

访问ngAfterViewInit内部的表单控件

2 个答案: