Angular：ContactComponent不存在nameFormControl等属性问题求助

问题原因 #

你在HTML模板中直接使用nameFormControl、emailFormControl等变量，但这些变量并未在ContactComponent类中定义为公共属性——它们只是contactForm这个FormGroup内部的子控件，TypeScript自然会提示属性不存在。

解决方案一：在组件类中暴露控件引用 #

通过getter方法把FormGroup内部的控件暴露给模板，这样模板就能直接引用这些变量：

修改contact.component.ts，在类中添加以下getter：

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

// ... 其他代码 ...

export class ContactComponent implements ErrorStateMatcher {

  contactForm: FormGroup = new FormGroup({
    nameFormControl: new FormControl(''),
    emailFormControl: new FormControl(''),
    bodyFormControl: new FormControl(''),
  })

  // 添加这三个getter
  get nameFormControl() {
    return this.contactForm.get('nameFormControl') as FormControl;
  }

  get emailFormControl() {
    return this.contactForm.get('emailFormControl') as FormControl;
  }

  get bodyFormControl() {
    return this.contactForm.get('bodyFormControl') as FormControl;
  }

  // ... 其他代码 ...
}

你的原有HTML模板无需修改，即可正常识别这些控件。

解决方案二：使用Angular Reactive Forms标准写法（更推荐） #

直接在模板中使用formControlName指令绑定FormGroup内部的控件，这是Angular Reactive Forms的标准用法，无需额外定义getter：

修改contact.component.html： #

1. 移除input/textarea上的[formControl]="xxxFormControl"，替换为formControlName="xxxFormControl"
2. 移除input上多余的[formGroup]="contactForm"（form标签已绑定formGroup，内部控件无需重复绑定）
3. 判断错误时，通过contactForm.get('xxxFormControl')获取控件

修改后的关键代码示例：

<form [formGroup]="contactForm">
    <mat-card-content>
        <mat-form-field>
            <mat-label>Nombre y apellidos</mat-label>
            <input matInput formControlName="nameFormControl" required name="name" maxlength="128" autocomplete="off" autofocus>
            @if (contactForm.get('nameFormControl')?.hasError('required') || contactForm.get('nameFormControl')?.hasError('pattern')) {
                <mat-error>Por favor, rellena este campo</mat-error>
            }
        </mat-form-field>
    </mat-card-content>

    <!-- 邮箱字段修改 -->
    <mat-card-content>
        <mat-form-field>
            <mat-label>Correo electrónico</mat-label>
            <input matInput formControlName="emailFormControl" required name="email" maxlength="128" autocomplete="off">
            @if (contactForm.get('emailFormControl')?.hasError('required')) {
                <mat-error>Por favor, rellena este campo</mat-error>
            }
            @else if (contactForm.get('emailFormControl')?.hasError('email') || contactForm.get('emailFormControl')?.hasError('pattern')) {
                <mat-error>Debes introducir una dirección de correo electrónico válida</mat-error>
            }
        </mat-form-field>
    </mat-card-content>

    <!-- 消息字段修改 -->
    <mat-card-content>
        <mat-form-field>
            <mat-label>Mensaje</mat-label>
            <textarea #contactBody matInput formControlName="bodyFormControl" name="body" maxlength="1024" autocomplete="off"></textarea>
            <mat-hint align="end">{{ contactBody.value.length }} / 1024</mat-hint>
            @if (contactForm.get('bodyFormControl')?.hasError('required') || contactForm.get('bodyFormControl')?.hasError('pattern')) {
                <mat-error>Por favor, rellena este campo</mat-error>
            }
        </mat-form-field>
    </mat-card-content>
</form>

额外优化：简化组件初始化代码 #

你当前代码中先通过new FormGroup初始化contactForm，又在ngOnInit里用formBuilder重新赋值，这一步冗余。可直接在ngOnInit中初始化：

修改contact.component.ts：

export class ContactComponent implements ErrorStateMatcher {

  contactForm: FormGroup; // 仅声明变量，不提前初始化

  constructor(private appService: AppService, private formBuilder: FormBuilder, private _snackBar: MatSnackBar) {}

  // ... 其他代码 ...

  ngOnInit(): void {
    this.contactForm = this.formBuilder.group(
      {
        nameFormControl: [
          '',
          [
            Validators.required,
            Validators.pattern(/[\S]/)
          ]
        ], 
        emailFormControl: [
          '',
          [
            Validators.required,
            Validators.email,
            Validators.pattern("^([a-zA-Z0-9-._]+)@([A-Za-z-]+)\.([a-z]{2,3}(.[a-z]{2,3})?)$")
          ]
        ], 
        bodyFormControl: [
          '',
          [
            Validators.required,
            Validators.pattern(/[\S]/g)
          ]
        ]
      },
    );
  }
}

内容的提问来源于stack exchange，提问作者David Encina Martínez