formGroup在angular中被取消分配

Question

以下是我的反应表单的.ts文件

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validator, Validators } from '@angular/forms';
import { PasswordCheck } from './custom-validators/password-checker';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
title = 'signup-reactive';
registerForm: FormGroup;
submitted: boolean = false;
constructor(private formBuilder: FormBuilder) { } 
ngOnInit() {
this.registerForm = this.formBuilder.group({
firstName: [''/* by default value of the field*/,Validators.required,Validators.minLength(3)],
lastName: ['',Validators.required,Validators.minLength(2)],
email: ['',Validators.email,Validators.required],
password: ['',Validators.required],
confirmPassword: ['',Validators.required],
acceptTandC : [false,Validators.requiredTrue]
},{
validators:PasswordCheck('password','confirmPassword')
});


}
onSubmit(){
this.submitted = true;
if(this.registerForm.invalid)
{
return;
}
else
{
console.table(this.registerForm.value);
console.table(this.registerForm.value);
alert("success" + JSON.stringify(this.registerForm.value));
}
}

get h(){
return this.registerForm.controls; 
}
onReset(){
this.submitted = false;
this.registerForm.reset();
}

}

下面是我的HTML文件的代码

<div class="container">
<div class="card bg-dark text-white m-3 mt-5">
<h5 class="card-header text-center">
<img src="../assets/lco.png" alt="" width="30" height="30" class="mr-2" />
LCO Signup Form
</h5>
<div class="card-body">
<form [formGroup]="registerForm">
<div class="form-row">
<div class="form-group col-6">
<label>First Name</label>
<input type="text" class="form-control"
formControlName = "firstName"
[ngClass] = "{ 'is-invalid' : submitted && h.firstName.errors}"
/>
<div class="text-warning">
<div>
First Name is required
</div>
</div>
</div>
<div class="form-group col-6">
<label>Last Name</label>
<input type="text" class="form-control" formControlName = "lastName"
[ngClass] = "{ 'is-invalid' : submitted && h.lastName.errors}"
/>
<div class="text-warning">
<div>
Last Name is required
</div>
</div>
</div>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control"
formControlName = "email"
[ngClass] = "{ 'is-invalid' : submitted && h.email.errors}"
/>
<div class="text-warning">
<div>Email is required</div>
<div>
Email must be a valid email address
</div>
</div>
</div>

<ng-container>
<div class="text-danger">
Value is required.
</div>
</ng-container>
<div class="form-row">
<div class="form-group col">
<label>Password</label>
<input type="password" class="form-control" 
formControlName = "password"
[ngClass] = "{ 'is-invalid' : submitted && h.password.errors}"
/>
<div class="text-warning">
<div>Password is required</div>
<div>
Password must be at least 6 characters
</div>
</div>
</div>
<div class="form-group col">
<label>Confirm Password</label>
<input type="password" class="form-control" 
formControlName = "confirmPassword"
[ngClass] = "{ 'is-invalid' : submitted && h.confirmPassword.errors}"
/>
<div class="text-warning">
<div>
Confirm Password is required
</div>
<div>
Passwords must match
</div>
</div>
</div>
</div>
<div class="form-group form-check">
<input type="checkbox" id="acceptTerms" class="form-check-input"
formControlName = "acceptTandC"
[ngClass] = "{ 'is-invalid' : submitted && h.acceptTandC.errors}"
/>
<label for="acceptTerms" class="form-check-label">Accept Terms & Conditions</label>
<div class="text-warning">
Accept Ts & Cs is required
</div>
</div>
<div class="text-center">
<button class="btn btn-success btn-lg px-4 mr-3" (ngSubmit)="onSubmit()">Register</button>
<button class="btn btn-warning" type="reset" (click)="onReset()">
Reset
</button>
<p class="text white">Value: {{ registerForm.value | json }}</p>
<p class="text white">Value: {{ registerForm.valid | json }}</p>
</div>
</form>
</div>
</div>
</div>

但这段代码在控制台中给了我错误而且最后的p个标签也不工作

控制台中的错误是

core.js:5980错误错误：期望验证器返回Promise或Observable。

<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});
at Function.missingFormException (forms.js:1777)
at FormGroupDirective._checkFormPresent (forms.js:5768)
at FormGroupDirective.ngOnChanges (forms.js:5587)
at FormGroupDirective.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1471)
at callHook (core.js:2490)
at callHooks (core.js:2457)
at executeInitAndCheckHooks (core.js:2408)
at selectIndexInternal (core.js:8194)
at Module.ɵɵadvance (core.js:8177)
at AppComponent_Template (app.component.html:14)

请帮我解决这个问题，我已经阅读了文档，但无法得出的结论

问题是无效类没有在这里添加

Answer 1

Angular抛出错误，因为数组中的第三个对象必须是异步验证器，并且您提供了基本的验证器。

更换

firstName: ['',Validators.required,Validators.minLength(3)],
lastName:  ['',Validators.required,Validators.minLength(2)],
email:     ['',Validators.email,Validators.required],
...

带有

firstName: ['',[Validators.required,Validators.minLength(3)]],
lastName:  ['',[Validators.required,Validators.minLength(2)]],
email:     ['',[Validators.email,Validators.required]],
...