错误TypeError：“无法在”注册表单“上分配给属性”验证器“：不是对象”
我尝试了在同一个问题中回答的所有解决方案，但没有奏效。 "can't assign to property "validator" on "formControlAnimalSelect": not an object" Angular Typescript
我还检查了我的TypeScript代码中的FormGroup和HTML中的表单元素之间的链接，这是正确的。
//typescript
import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {AuthService} from '../../services/auth.service';
import {Router} from '@angular/router';
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {
signUpForm: FormGroup;
errorMessage: string;
constructor(private formBuilder: FormBuilder,
private authService: AuthService,
private router: Router) { }
ngOnInit() {
this.initForm();
}
initForm() {
this.signUpForm = this.formBuilder.group({
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.pattern
(/[0-9a-zA-Z]{6,}/)]]
});
}
onSubmit() {
const email = this.signUpForm.get('email').value;
const password = this.signUpForm.get('password').value;
this.authService.createNewUser(email, password).then(
() => {
this.router.navigate(['/books']);
},
(error) => {
this.errorMessage = error;
}
);
}
}
<html>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h2>Create an account</h2>
<form formGroup="signUpForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="email"> Email </label>
<input type="text" id="email" class="form-control"
formControlName="email">
</div>
<div class="form-group">
<label for="password"> Password </label>
<input type="password" id="password"
class="form-control" formControlName="password">
</div>
<button class="btn btn-primary" type="submit"
[disabled]="signUpForm.invalid"> Create account</button>
</form>
<p class="text-danger">{{errorMessage}}</p>
</div>
</div>
您的HTML应该是这样的
试试这个：
<html>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h2>Create an account</h2>
<form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="email"> Email </label>
<input type="text" id="email" class="form-control"
formControlName="email">
</div>
<div class="form-group">
<label for="password"> Password </label>
<input type="password" id="password"
class="form-control" formControlName="password">
</div>
<button class="btn btn-primary" type="submit"
[disabled]="signUpForm.invalid"> Create account</button>
</form>
<p class="text-danger">{{errorMessage}}</p>
</div>
</div>
您必须错过绑定FormGroup，如果您必须添加此代码，那么为什么会出现错误。
HTML：
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h2>Create an account</h2>
<form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="email"> Email </label>
<input type="text" id="email" class="form-control"
formControlName="email">
</div>
<div class="form-group">
<label for="password"> Password </label>
<input type="password" id="password"
class="form-control" formControlName="password">
</div>
<button class="btn btn-primary" type="submit"
[disabled]="signUpForm.invalid"> Create account</button>
</form>
<p class="text-danger">{{errorMessage}}</p>
</div>
</div>
您还可以查看链接：
https://stackblitz.com/edit/angular-buks6o?file=src%2Fapp%2Fapp.component.ts