为什么我在 angular 的验证表单中出现错误？

Question

我创建了一个 Angular 表单，我想验证输入。 此行应验证地址：

<span *ngIf='submitted && f.caddress.errors' class="invalid-feedback">Customer address is required!</span>

但我想出了这个错误：

属性 'caddress' 来自索引签名，因此必须使用 ['caddress'] 访问它。

这是.ts 文件：

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

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {


  
  customerForm!:FormGroup;
  submitted =false;

  constructor(
    private formbuilder:FormBuilder,
    private route: ActivatedRoute,
    private router:Router
  ) { }

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

  onSubmit() { 
    this.customerForm = this.formbuilder.group({
      uname : ['', Validators.required],
      cphone : ['', Validators.required],
      caddress : ['', Validators.required]
    })
  }
  get f(){
    return this.customerForm.controls
  }

  submitCustomer(){
    this.submitted = true;
    if (this.customerForm.invalid){
      return;
    }

  }

}

Answer 1

该错误说明了您想要做什么。 你需要使用f[caddress].errors.required而不是f.caddress.errors

FromGroup控件内部如下所示，

controls: {
    [key: string]: AbstractControl;
};

因此，当您引用formControlName时，您需要使用this.customerForm.controls[caddress]或this.customerForm.get('caddress')

你可以检查这样的错误this.customerForm.get('caddress').error.required