时间戳

首页 > 解决方案 > ngForm 变量在组件中未定义

javascript - ngForm 变量在组件中未定义

问题描述

我已经创建了一个有角度的表格，并使用模板驱动的方法来控制它。已在组中使用 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

标签： javascriptangular

解决方案

ngOnInit为时过早。你需要ngAfterContentInit或ngAfterViewInit。该视图尚未创建，ngOnInit也@ViewChild('createProjectForm') createForm尚未设置。

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

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

不会工作。您可以在模板中使用disable指令。

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

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

推荐阅读