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)
]
]
},
);
}
}
问题出在 nameFormControl、emailFormControl 和 bodyFormControl 上,它们位于 FormGroup contactForm 下。
你们能给我一些关于这个主题的线索吗?
非常感谢!
您不应在表单字段上设置 [formGroup],并且 [formControl] 应为 formControlName
来自:
<input matInput [formGroup]="contactForm" [formControl]="nameFormControl"
至:
<input matInput formControlName="nameFormControl"
如果您在 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 时,可以将控件视为字段,因此您可以简单地这样命名它们:
nameFormControl 到 name
emailFormControl 至 电子邮件
bodyFormControl 到 body
像这样:
contactForm: FormGroup = new FormGroup({
name: new FormControl(''),
email: new FormControl(''),
body: new FormControl(''),
})