angular - 为什么 Angular 6 会出现“找不到具有未指定名称属性的控件”错误?
问题描述
我正在为我的前端编程我的注册页面,但我遇到了一个错误,即“找不到具有未指定名称属性的控件”。我相信这表明我的 register.component.ts 中没有定义控制器,但我已经在我的 TS 代码中这样做了。
这是我的 register.html。
<form class="example-form" [formGroup]="registerForm" (ngSubmit)="handleSubmit()">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<mat-form-field class="example-full-width">
<input matInput placeholder="First Name" [formControl]="firstNameC">
<mat-error *ngIf="firstNameC.invalid">{{firstNameError()}}</mat-error>
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput placeholder="Last Name" [formControl]="lastNameC">
<mat-error *ngIf="lastNameC.invalid"> {{lastNameError()}} </mat-error>
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput placeholder="email" [formControl]="emailC">
<mat-error *ngIf="emailC.invalid">{{emailError()}}</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="password" [formControl]="passwordC">
<mat-error *ngIf="passwordC.invalid">{{passwordError()}}</mat-error>
</mat-form-field>
<button mat-raised-button color="accent"> Register </button>
</form>
输入控制器在 ngOnInit() 中定义,但它们是在类中声明的。
import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {Routes} from '@angular/router';
import {
MatToolbarModule, MatButtonModule, MatInputModule, MatIconModule, MatSelectModule, MatTableModule, MatGridListModule,
MatCardModule, MatMenuModule, MatFormFieldModule, MatOptionModule, MatRadioModule
} from '@angular/material';
import {HttpClientModule } from '@angular/common/http';
import {FormBuilder, FormControl, FormsModule} from '@angular/forms';
import {FormGroup} from '@angular/forms';
import {Validators} from '@angular/forms';
import {ReactiveFormsModule} from '@angular/forms';
import { LayoutModule } from '@angular/cdk/layout';
import 'hammerjs';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
registerForm: FormGroup;
loading = false;
submitted = false;
hide = true;
public lastNameC: FormControl;
public firstNameC: FormControl;
public emailC: FormControl;
public passwordC: FormControl;
handleSubmit() {
console.log(this.registerForm.value);
alert('You registered!');
}
trueOrFalse() {
return this.registerForm.valid;
}
passwordError() {
return this.passwordC.hasError('minlength') ? 'Your password is too short.' :
this.passwordC.hasError('pattern') ? 'Your password must have one uppercase letter, one lowercase letter, one number and one non alphanumeric character.' :
' ';
}
lastNameError() {
if (this.lastNameC.hasError('required')) {
return 'Last name is required.';
}
}
emailError() {
return this.emailC.hasError('required') ? 'You must enter a value.' :
this.emailC.hasError('email') ? 'Not a valid email. Please read the field again.' :
' ';
}
firstNameError() {
if (this.firstNameC.hasError('required')) {
return 'Enter your first name.';
}
}
/*
this.emailC = new FormControl('', [Validators.required, Validators.email]);
this.firstNameC = new FormControl('', [Validators.required]);
this.lastNameC = new FormControl('', [Validators.required]);
this.passwordC = new FormControl('',
[Validators.required, Validators.minLength(8),
Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[$@$!%*?&])[A-Za-z\\d$@$!%*?&]{8,}')]);
*/
constructor() {
}
ngOnInit() {
this.registerForm = new FormGroup({
emailC: new FormControl('', [Validators.required, Validators.email]),
firstNameC : new FormControl('', [Validators.required]),
lastNameC: new FormControl('', [Validators.required]),
passwordC : new FormControl('', [Validators.required, Validators.minLength(8), Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[$@$!%*?&])[A-Za-z\\d$@$!%*?&]{8,}')]),
});
}
}
但是,我的控制台中有一个错误。
RegisterComponent.html:1 ERROR Error: Cannot find control with unspecified name attribute
at _throwError (forms.js:1732)
at setUpControl (forms.js:1640)
at FormControlDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormControlDirective.ngOnChanges (forms.js:4303)
at checkAndUpdateDirectiveInline (core.js:9247)
at checkAndUpdateNodeInline (core.js:10515)
at checkAndUpdateNode (core.js:10477)
at debugCheckAndUpdateNode (core.js:11110)
at debugCheckDirectivesFn (core.js:11070)
at Object.eval [as updateDirectives] (RegisterComponent.html:4)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:11062)
我必须在我的注册 html 中使用 FormControlName 而不是 [formControl] 吗?这是我的 stackblitz 测试演示。我永远感激你的帮助。
解决方案
是的,您应该考虑使用formControlName
. 我的表单控件如下所示:
<input class="form-control"
id="productCodeId"
type="text"
placeholder="Code (required)"
formControlName="productCode" />
注意formControlName
上面代码中使用的。
我的组件有这样的代码:
ngOnInit(): void {
this.productForm = this.fb.group({
productName: ['', [Validators.required,
Validators.minLength(3),
Validators.maxLength(50)]],
productCode: ['', Validators.required],
starRating: ['', NumberValidators.range(1, 5)],
description: ''
});
}
这具有额外的好处,即不需要为每个FormControl
.
推荐阅读
- python - python dataframe .duplicated 返回相同值的多次出现
- javascript - 谷歌云函数python中的CORS错误chrome扩展
- gradle - Gradle Checkstyle 插件与 google checkstyle 的兼容性
- flutter - 颤振:list.sort() 或比较器功能不起作用
- python - 在 HyperNetX 中查找节点的所有超边
- android - 生成签名 Apk 时出现问题
- javascript - VSCode 编写脚本为 React Native 项目运行多行
- android - 当我打开我的颤振应用程序时,它总是显示登录屏幕几秒钟,即使我已经在上次会话中登录。在那个主页之后?
- c# - C# 来自在运行时创建不同实例的单例模式类的意外输出
- python - 用数据框中的索引替换每个非零值