它說在 TS 檔案中找不到名稱“FormGroup”：我已正確完成所有操作，有人可以幫助我解決此代碼，我不知道此代碼有什么問題。TS代碼
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-register-form',
templateUrl: './register-form.component.html',
styleUrls: ['./register-form.component.css']
})
export class RegisterFormComponent implements OnInit {
userForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.userForm = this.formBuilder.group({
firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z] $')]],
lastName: ['',[Validators.required, Validators.pattern('^[a-zA-Z] $')]],
email: ['', [Validators.required, Validators.email]]
});
}
onSubmit(){
if(this.userForm.valid){
alert('User form is valid!!')
} else {
alert('User form is not valid!!')
}
}
}
我的 html 代碼：
<form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="text-center border border-light p-5">
<p class="h4 mb-4">Sign up</p>
<div class="form-group col">
<div class="form-row">
<div class="form-row mb-4">
<div class="col">
<input type="text" formControlName="firstName" id="defaultRegisterFormFirstName" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" formControlName="lastName" id="defaultRegisterFormLastName" class="form-control" placeholder="Last name">
</div>
</div>
</div>
</div>
<input type="email" formControlName="email" id="defaultRegisterFormEmail" class="form-control mb-4" placeholder="E-mail">
<button class="btn btn-info my-4 btn-block" type="submit">Sign in</button>
<hr>
</form>
在stackoverflow的許多問題中發現了這個問題，但沒有運氣。請幫我弄清楚我做錯了什么
uj5u.com熱心網友回復：
我不知道這是否是你的全部代碼，但也許你錯過了這個匯入，因為我沒有看到它？
import {FormControl, FormGroup} from '@angular/forms';
uj5u.com熱心網友回復：
您應該在視圖加載后初始化 formbuilder。
import {FormControl, FormGroup} from '@angular/forms';
ngAfterViewInit(){
this.userForm = this.formBuilder.group({
firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z] $')]],
lastName: ['',[Validators.required, Validators.pattern('^[a-zA-Z] $')]],
email: ['', [Validators.required, Validators.email]]
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/384473.html
下一篇：html和css影像大小問題