“ContactComponent”类型上不存在属性“nameFormControl”

问题描述 投票:0回答:2

StackOverflow 社区您好!

我正在使用 Angular + Node 开发一个应用程序,并且遇到了有关使用 Material Angular 的表单和验证器的大问题。

目前,我被 HTML 组件困住了,无法识别输入,我不知道我错过了什么。

我有这个代码:

contact.component.html:

<mat-card>
<mat-card-header>
    <mat-card-title>Formulario de contacto</mat-card-title>
    <mat-card-subtitle>Ponte en contacto conmigo</mat-card-subtitle>
</mat-card-header>
<form [formGroup]="contactForm">
    <mat-card-content>
        <mat-form-field>
            <mat-label>Nombre y apellidos</mat-label>
            <input matInput [formGroup]="contactForm" [formControl]="nameFormControl" required name="name" maxlength="128" autocomplete="off" autofocus>
            @if (nameFormControl.hasError('required') || 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 [formControl]="emailFormControl" required name="email" maxlength="128" autocomplete="off">
            @if (emailFormControl.hasError('required')) {
                <mat-error>Por favor, rellena este campo</mat-error>
            }
            @else if (emailFormControl.hasError('email')) {
                <mat-error>Debes introducir una dirección de correo electrónico válida</mat-error>
            }
            @else if (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 [formControl]="bodyFormControl" name="body" maxlength="1024" autocomplete="off"></textarea>
            <mat-hint align="end">{{ contactBody.value.length }} / 1024</mat-hint>
            @if (bodyFormControl.hasError('required') || bodyFormControl.hasError('pattern')) {
                <mat-error>Por favor, rellena este campo</mat-error>
            }
        </mat-form-field>
    </mat-card-content>
</form>
<button mat-raised-button color="primary" (click)="saveMessage()">Enviar formulario</button>

contact.component.ts

import { Component, OnInit } from '@angular/core';
import { AbstractControl, ReactiveFormsModule, FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { AppService } from './../app.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ErrorStateMatcher } from '@angular/material/core';


@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrl: './contact.component.scss'
})
export class ContactComponent implements ErrorStateMatcher {

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

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

  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }

  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)
          ]
        ]
      },
    );
  }
}

问题出在 nameFormControlemailFormControlbodyFormControl 上,它们位于 FormGroup contactForm 下。

你们能给我一些关于这个主题的线索吗?

非常感谢!

html angular forms validation components
2个回答
0
投票

您不应在表单字段上设置 [formGroup],并且 [formControl] 应为 formControlName

来自:

<input matInput [formGroup]="contactForm" [formControl]="nameFormControl"

至:

<input matInput formControlName="nameFormControl"


0
投票

如果您在 FormGroup 中使用 formControlName,则应该使用 formControlName,并且不要在输入字段上添加 [formGroup]。像这样:

 <input matInput formControlName="nameFormControl" required name="name" maxlength="128" autocomplete="off" autofocus>

删除输入字段中的 [formGroup] 并仅替换以下内容:

[formControl]="nameFormControl"

有了这个:

formControlName="nameFormControl"

此外,如果没有 contactForm 对象,您将无法直接访问该控件。 所以你需要更换以下内容:

@if (emailFormControl.hasError('required'))

致:

@if (contactForm.controls['emailFormControl'].hasError('required'))

提示: 如果您使用 Visual Studio Code,那么我强烈建议使用 Angular Language Service 扩展。它会向您显示 html 文件中的错误并帮助您修复它们。

另外,当您使用 FormGroup 时,可以将控件视为字段,因此您可以简单地这样命名它们:

nameFormControlname
emailFormControl电子邮件
bodyFormControlbody

像这样:

  contactForm: FormGroup = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
    body: new FormControl(''),
  })
© www.soinside.com 2019 - 2024. All rights reserved.