Angular中formControlName绑定后属性不存在类型错误问题咨询

我明白你遇到的问题了——跟着教程写表单验证时，直接用field.invalid却触发了属性不存在的错误，这是因为Angular模板里引用的name、region这些变量，需要在组件类里有对应的定义才能被识别。教程里大概率是省略了组件类中创建getter的步骤，你补上这部分就能解决问题了。

问题原因 #

你的模板里直接使用了name.invalid、region.invalid这类表达式，但你的AddCountryFormComponent类中并没有定义name、region这些属性。Angular在渲染模板时，会去组件类中查找这些变量，找不到就会抛出这个类型错误。

解决方案 #

在你的AddCountryFormComponent类中，为每个表单控件添加getter方法，把表单控件暴露给模板。这样模板里就能像教程里那样直接使用field.invalid了：

步骤1：在组件类中添加getter #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-add-country-form',
  templateUrl: './add-country-form.component.html',
  styleUrls: ['./add-country-form.component.css']
})
export class AddCountryFormComponent implements OnInit {
  nestedForm!: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    // 初始化表单，确保包含所有需要的控件及验证规则
    this.nestedForm = this.formBuilder.group({
      name: ['', [Validators.required, Validators.minLength(2)]],
      population: ['', [Validators.required, Validators.minLength(2)]],
      region: ['', [Validators.required, Validators.minLength(2)]]
    });
  }

  // 为每个表单控件添加getter
  get name(): FormControl {
    return this.nestedForm.get('name') as FormControl;
  }

  get population(): FormControl {
    return this.nestedForm.get('population') as FormControl;
  }

  get region(): FormControl {
    return this.nestedForm.get('region') as FormControl;
  }
}

步骤2：确认模板代码的正确性 #

你的HTML代码本身逻辑没问题，只要组件类里的getter定义好了，模板里的name.invalid、region.invalid就能正常工作。这里把你的HTML代码格式化一下方便查看：

<div class="panel-body">
  <form [formGroup]="nestedForm">
    <!-- single field info -->
    <div class="row">
      <div class="col-6">
        <div class="form-group">
          <div class="form-group col-sm-4">
            <label for="nameText" class="">Country Name</label>
            <input type="text" formControlName="name" 
                   [ngClass]="{'form-control': true, 'is-invalid': name.invalid && name.touched, 'is-valid': name.valid}" 
                   id="nameText" placeholder="Enter name">
            <small id="fnHelp" *ngIf="name.errors?.required && name.touched" class="form-text custom-invalid-feedback">Field is required</small>
            <small id="fnHelp" *ngIf="name.errors?.minlength && name.touched" class="form-text custom-invalid-feedback">Value must contain atleast 2 characters</small>
          </div>
          <div class="form-group col-sm-4">
            <label for="populationText" class="">Country Population</label>
            <input type="text" formControlName="population" 
                   [ngClass]="{'form-control': true, 'is-invalid': population.invalid && population.touched, 'is-valid': population.valid}" 
                   id="populationText" placeholder="Enter population">
            <small id="fnHelp" *ngIf="population.errors?.required && population.touched" class="form-text custom-invalid-feedback">Field is required</small>
            <small id="fnHelp" *ngIf="population.errors?.minlength && population.touched" class="form-text custom-invalid-feedback">Value must contain atleast 2 characters</small>
          </div>
          <div class="form-group col-sm-6">
            <label for="regionText" class="">Region</label>
            <input type="text" formControlName="region" 
                   [ngClass]="{'form-control': true, 'is-invalid': region.invalid && region.touched, 'is-valid': region.valid}" 
                   id="regionText" placeholder="Enter region">
            <small id="fnHelp" *ngIf="region.errors?.required && region.touched" class="form-text custom-invalid-feedback">Field is required</small>
            <small id="fnHelp" *ngIf="region.errors?.minlength && region.touched" class="form-text custom-invalid-feedback">Value must contain atleast 2 characters</small>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

补充说明 #

如果你的表单是嵌套表单组（比如某个控件是FormGroup类型），那对应的getter也要调整。比如如果region是在location这个嵌套组里，那getter应该写成：

get region(): FormControl {
  return this.nestedForm.get('location.region') as FormControl;
}

不过从你的代码看，当前所有控件都是顶层的，所以用前面的getter就可以了。

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