Angular 15模板驱动表单提交报错，求模型驱动表单实现方案

一、当前报错原因 #

你在HTML模板里写了*ngIf="subject.errors?.['required']"，但组件类中并没有定义名为subject的属性，TypeScript因此抛出不存在该属性的错误。在模板驱动表单中，需要通过表单的模板引用变量firststageform的controls对象来访问控件的错误状态。

二、模板驱动表单的修复方案 #

修改HTML中的错误提示部分，改为通过表单引用变量获取控件错误：

<div *ngIf="firststageform.controls['subject']?.errors?.['required'] && firststageform.controls['subject']?.touched">
  Subject is required.
</div>

添加touched判断可以避免页面刚加载就显示错误提示，提升用户体验。

三、模型驱动（响应式）表单实现方案 #

响应式表单是Angular推荐的模型驱动实现方式，以下是完整步骤：

1. 模块导入 #

在组件所属的模块（如AppModule）中导入ReactiveFormsModule：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已导入模块
    ReactiveFormsModule
  ]
})
export class AppModule { }

2. 组件类代码修改 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FirstStageQuery } from './first-stage-query.model';

@Component({
  selector: 'app-requester',
  templateUrl: './first-stage-query.component.html',
  styleUrls: ['./first-stage-query.component.css']
})
export class FirstStageQueryComponent implements OnInit {
  firstStageForm!: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    // 初始化表单并设置验证规则
    this.firstStageForm = this.fb.group({
      subject: ['', Validators.required],
      contactno: ['']
    });
  }

  saveFirstStage() {
    if (this.firstStageForm.valid) {
      // 将表单值转换为模型对象
      const firststage: FirstStageQuery = this.firstStageForm.value;
      console.log(firststage);
      // 此处可添加提交至后端的业务逻辑
    }
  }
}

3. HTML模板修改 #

<form [formGroup]="firstStageForm" (ngSubmit)="saveFirstStage()" novalidate class="form-details">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <div class="form-group row">
          <label class="col-sm-4 col-md-4 col-form-label form-label-custom">Subject<em>*</em></label>
          <div class="col-sm-8 col-md-8">
            <input 
              type="text" 
              formControlName="subject" 
              class="form-control form-control-custom" 
              placeholder="Subject" 
            />
            <div *ngIf="firstStageForm.get('subject')?.hasError('required') && firstStageForm.get('subject')?.touched">
              Subject is required.
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group row">
          <label class="col-sm-4 col-md-4 col-form-label form-label-custom">Contact No.</label>
          <div class="col-sm-8 col-md-8">
            <input 
              type="text" 
              formControlName="contactno" 
              class="form-control form-control-custom" 
              placeholder="Contact No." 
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 新增提交按钮 -->
    <div class="row mt-3">
      <div class="col-md-12 text-right">
        <button type="submit" class="btn btn-primary" [disabled]="!firstStageForm.valid">Submit</button>
      </div>
    </div>
  </div>
</form>

4. 关键说明 #

• 用FormBuilder简化表单创建，FormGroup对应整个表单容器，FormControl对应单个输入控件。
• 通过formControlName绑定控件，替代模板驱动的ngModel，实现模型与视图的双向同步。
• 验证规则在组件类中集中定义，模板通过get('controlName')获取控件的状态和错误信息。
• 提交前先校验表单有效性，再将表单值转换为模型对象进行后续处理。

内容的提问来源于stack exchange，提问作者Kumara