angular - NullInjectorError:没有 FormGroup 的提供者!”
问题描述
我正在开发一个角度应用程序。我实现了一个对话框组件,其目的是成为一个模型弹出窗口,它将显示一个要注册的表单。组件如下:
import { Component, OnInit, Inject } from '@angular/core';
import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import {MAT_RADIO_DEFAULT_OPTIONS } from '@angular/material';
@Component({
selector: 'app-user-dialog',
templateUrl: './user-dialog.component.html',
styleUrls: ['./user-dialog.component.scss'],
providers: [
{provide: MAT_RADIO_DEFAULT_OPTIONS, useValue: { color: 'accent' }},
{ provide: MatDialogRef, useValue: {} }
// ,{ provide: MAT_DIALOG_DATA, useValue: [] }
]
})
export class UserDialogComponent implements OnInit {
public form: FormGroup;
private validateAreEqual(fieldControl: FormControl) {
return fieldControl.value === this.form.get('password').value ? null : {
NotEqual: true
};
}
constructor(
private dialogRef: MatDialogRef<UserDialogComponent>,
@Inject(MAT_DIALOG_DATA) data) {
}
ngOnInit() {
this.form = new FormGroup({
gender: new FormControl('', Validators.required),
lastName: new FormControl('', Validators.required),
firstName: new FormControl('', Validators.required),
email: new FormControl('', Validators.compose([Validators.email, Validators.required])),
password: new FormControl('', Validators.compose([Validators.required, Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}')])),
// tslint:disable-next-line: max-line-length
confirmPassword: new FormControl('', Validators.compose([Validators.required, Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}'), this.validateAreEqual.bind(this)]))
});
}
save() {
this.dialogRef.close(this.form.value);
}
close() {
this.dialogRef.close();
}
}
模板是我在其中定义 formGroup 的表单。这是代码
<h2 mat-dialog-title>S'enregistrer</h2>
<mat-dialog-content [formGroup]="form">
<mat-form-field>
<mat-radio-group name="gender" required formControlName="gender">
<mat-radio-button labelPosition="after" value="F">Mme</mat-radio-button>
<mat-radio-group labelPosition="after" value="M">Mr</mat-radio-group>
</mat-radio-group>
<mat-error *ngIf="form.get('gender').hasError('required')">Le sexe homme ou femme est obligatoire.</mat-error>
<mat-label>Nom</mat-label>
<input matInput required type="text" placeholder="Nom" formControlName="lastName">
<mat-error *ngIf="form.get('lastName').hasError('required')">Le nom est obligatoire.</mat-error>
<mat-label>Prénom</mat-label>
<input matInput required type="text" placeholder="Prénom" formControlName="firstName">
<mat-error *ngIf="form.get('firstName').hasError('required')">Le prénom est obligatoire.</mat-error>
<mat-label>E-mail</mat-label>
<input matInput required type="email" placeholder="E-mail" formControlName="email">
<mat-error *ngIf="form.get('email').hasError('required')">L'email est obligatoire.</mat-error>
<mat-error *ngIf="form.get('email').hasError('email')">L'email n'est pas valide.</mat-error>
<mat-label>Mot de passe</mat-label>
<input matInput required type="password" placeholder="Mot de passe" formControlName="password">
<mat-error *ngIf="form.get('password').hasError('required')">Le mot de passe est obligatoire.</mat-error>
<mat-error *ngIf="form.get('password').hasError('pattern')">Le mot de passe n'est pas valide : il doit contenir au moins 8 caractères, un caractère minuscule, un caractère majuscule, un chiffre et un caractère spécial.</mat-error>
<mat-label>Confirmation du mot de passe</mat-label>
<input matInput required type="password" placeholder="Confirmation du mot de passe" formControlName="confirmPassword">
<mat-error *ngIf="form.get('confirmPassword').hasError('required')">La confirmation du mot de passe est obligatoire.</mat-error>
<mat-error *ngIf="form.get('confirmPassword').hasError('pattern')">La confirmation du mot de passe n'est pas valide : elle doit contenir au moins 8 caractères, un caractère minuscule, un caractère majuscule, un chiffre et un caractère spécial.</mat-error>
<mat-error *ngIf="form.get('confirmPassword').hasError('NotEqual')">Le mot de passe et la confirmation du mot de passe doivent être les mêmes.</mat-error>
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions>
<button class="mat-raised-button"(click)="close()">Close</button>
<button class="mat-raised-button mat-primary"(click)="save()">Save</button>
</mat-dialog-actions>
我使用以下方法从另一个组件调用它:
openDialog() {
console.log('ca passe');
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.position = {
top: '0',
right: '0'
};
dialogConfig.width = '50%' ;
dialogConfig.height = '350px' ;
console.log(dialogConfig);
this.dialog.open(UserDialogComponent, dialogConfig);
}
但我得到了错误:
ERROR NullInjectorError: "StaticInjectorError(AppModule)[UserDialogComponent -> FormGroup]:
StaticInjectorError(Platform: core)[UserDialogComponent -> FormGroup]:
NullInjectorError: No provider for FormGroup!"
我看不出问题出在哪里。你可以帮帮我吗 ?
解决方案
FormsModule, ReactiveFormsModule
如果您使用的是 sharedModule.ts 或 app.module.ts,请确保导入该文件。如果您要导入 ShareModule.ts,请确保重新导出它们。示例://共享模块
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [FormsModule, ReactiveFormsModule],
declarations: [
...
],
exports: [
FormsModule, ReactiveFormsModule,
],
providers: [],
})
export class SharedModule {}
或者如果只有 app.module.ts
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SharedModule } from 'src/app/shared/sharedModule';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule, <!----- if you use sharedModule remove
ReactiveFormsModule <!----- if you use sharedModule remove
SharedModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}