ngForm 变量在组件中未定义

Question

我创建了一个 angular 表单，并使用模板驱动的方法来控制它。已在组中使用 ngForm，并尝试通过名称访问表单字段，但在控制台引用时出现错误 - this.form 未定义。

我的 html 看起来像 -

<form #createProjectForm="ngForm" (ngSubmit)="save()">
.....
 <mat-form-field appearance="outline">
              <mat-label>NMC/ODA Project No</mat-label>
              <input name="nmcNumbber" matInput autocomplete="off" />
            </mat-form-field>

并且在组件文件中-

    import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm, Form } from '@angular/forms';

@Component({
  selector: 'app-create-project-details-fields',
  templateUrl: './create-project-details-fields.component.html',
  styleUrls: ['./create-project-details-fields.component.scss']
})
export class CreateProjectDetailsFieldsComponent implements OnInit {
  
  @ViewChild('createProjectForm') createForm : NgForm;
  constructor() { }

  ngOnInit(): void {
    this.getFormStatus();
  }

getFormStatus(){
  this.createForm.controls['nmcNumbber'].disable();
}

但是控制台给出了-

谁能帮我解决这个问题？ TIA

Answer 1

ngOnInit 太早了。您需要ngAfterContentInit 或ngAfterViewInit。视图未在 ngOnInit 中创建，@ViewChild('createProjectForm') createForm 尚未设置。

您不能使用controls 来禁用模板驱动表单中的元素。线

this.createForm.controls['nmcNumbber'].disable();

行不通。您可以在模板中使用disable 指令。

<input name="nmcNumbber" matInput autocomplete="off" [disable]="true" />

这是反应式表单和模板驱动表单之间的主要区别。在模板驱动的表单中，大部分逻辑在模板/视图中，而在响应式表单中，大部分逻辑在视图控制器中。