Angular 在窗体中找不到名为formControlName的控件
我在stackoverflow的许多问题中都发现了这个问题，但运气不好。请帮我找出我做错了什么 组件中：Angular 在窗体中找不到名为formControlName的控件,angular,typescript,angular-forms,Angular,Typescript,Angular Forms,我在stackoverflow的许多问题中都发现了这个问题，但运气不好。请帮我找出我做错了什么 组件中： ngOnInit() { this.companyCreatForm = this._formBuilder.group({ name: [null, [Validators.required, Validators.minLength(5)]], about: [null, [Validators.required]], businessType
ngOnInit() {
this.companyCreatForm = this._formBuilder.group({
name: [null, [Validators.required, Validators.minLength(5)]],
about: [null, [Validators.required]],
businessType: [null, [Validators.required]],
address: this._formBuilder.group({
street: [],
website: [null, [Validators.required]],
mobile: [null, [Validators.required]],
email: [null, [Validators.required]],
pageId: [null, [Validators.required]],
}),
});
<form [formGroup]="companyCreatForm" (ngSubmit)="creat_company()" novalidate class="form-horizontal">
<div class="panel panel-default" *ngIf="generalPanel">
<div class="panel-heading">General Info</div>
<div class="panel-body">
<div class="form-group">
<label for="comapny name" class="col-sm-3 control-label">Company's Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="Company's Name" formControlName="name" #refName>
<div *ngIf="companyCreatForm.controls['name'].hasError('required') && refName.touched" class="alert alert-danger">
please enter name
</div>
<div *ngIf="companyCreatForm.controls['name'].hasError('minlength')" class="alert alert-danger">
please enter at least 5 characters
</div>
</div>
</div>
<div class="form-group">
<label for="business type" class="col-sm-3 control-label">Business type</label>
<div class="col-sm-8">
<select name="businessType" formControlName="businessType" class="form-control" [(ngModel)]="defaultType">
<option *ngFor="let type of businessTypes" [value]="type.id">{{type.name}}</option>
</select>
</div>
</div>
<div class="form-group">
<label for="about" class="col-sm-3 control-label">Add Company Description</label>
<div class="col-sm-8">
<textarea formControlName="about" class="form-control" id="txtArea" rows="6" cols="70"></textarea>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Contact Info</div>
<div class="panel-body">
<div class="form-group">
<label for="address" class="col-sm-3 control-label">Business Address</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="street" placeholder="Business Address">
</div>
</div>
<div class="form-group">
<label for="website" class="col-sm-3 control-label">Website</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="website" placeholder="website">
</div>
</div>
<div class="form-group">
<label for="telephone" class="col-sm-3 control-label">Telephone</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="mobile" placeholder="telephone">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="email" placeholder="email">
</div>
</div>
<div class="form-group">
<label for="page id" class="col-sm-3 control-label">Facebook Page ID</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="pageId" placeholder="facebook page id">
</div>
</div>
<div class="form-group">
<label for="about" class="col-sm-3 control-label"></label>
<div class="col-sm-3">
<!--span class="btn btn-success form-control" (click)="openGeneralPanel()">Back</span-->
</div>
<label for="about" class="col-sm-2 control-label"></label>
<div class="col-sm-3">
<button class="btn btn-success form-control" [disabled]="companyCreatForm.invalid" (click)="openContactInfo()">Continue</button>
</div>
</div>
</div>
</div>
</form>
ngOnInit() {
this.companyCreatForm = this._formBuilder.group({
name: [null, [Validators.required, Validators.minLength(5)]],
about: [null, [Validators.required]],
businessType: [null, [Validators.required]],
address: this._formBuilder.group({
street: [],
website: [null, [Validators.required]],
mobile: [null, [Validators.required]],
email: [null, [Validators.required]],
pageId: [null, [Validators.required]],
}),
});
<form [formGroup]="companyCreatForm" (ngSubmit)="creat_company()" novalidate class="form-horizontal">
<div class="panel panel-default" *ngIf="generalPanel">
<div class="panel-heading">General Info</div>
<div class="panel-body">
<div class="form-group">
<label for="comapny name" class="col-sm-3 control-label">Company's Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="Company's Name" formControlName="name" #refName>
<div *ngIf="companyCreatForm.controls['name'].hasError('required') && refName.touched" class="alert alert-danger">
please enter name
</div>
<div *ngIf="companyCreatForm.controls['name'].hasError('minlength')" class="alert alert-danger">
please enter at least 5 characters
</div>
</div>
</div>
<div class="form-group">
<label for="business type" class="col-sm-3 control-label">Business type</label>
<div class="col-sm-8">
<select name="businessType" formControlName="businessType" class="form-control" [(ngModel)]="defaultType">
<option *ngFor="let type of businessTypes" [value]="type.id">{{type.name}}</option>
</select>
</div>
</div>
<div class="form-group">
<label for="about" class="col-sm-3 control-label">Add Company Description</label>
<div class="col-sm-8">
<textarea formControlName="about" class="form-control" id="txtArea" rows="6" cols="70"></textarea>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Contact Info</div>
<div class="panel-body">
<div class="form-group">
<label for="address" class="col-sm-3 control-label">Business Address</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="street" placeholder="Business Address">
</div>
</div>
<div class="form-group">
<label for="website" class="col-sm-3 control-label">Website</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="website" placeholder="website">
</div>
</div>
<div class="form-group">
<label for="telephone" class="col-sm-3 control-label">Telephone</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="mobile" placeholder="telephone">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="email" placeholder="email">
</div>
</div>
<div class="form-group">
<label for="page id" class="col-sm-3 control-label">Facebook Page ID</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="pageId" placeholder="facebook page id">
</div>
</div>
<div class="form-group">
<label for="about" class="col-sm-3 control-label"></label>
<div class="col-sm-3">
<!--span class="btn btn-success form-control" (click)="openGeneralPanel()">Back</span-->
</div>
<label for="about" class="col-sm-2 control-label"></label>
<div class="col-sm-3">
<button class="btn btn-success form-control" [disabled]="companyCreatForm.invalid" (click)="openContactInfo()">Continue</button>
</div>
</div>
</div>
</div>
</form>
您应该为嵌套控件指定
formGroupName<div class="panel panel-default" formGroupName="address"> <== add this
<div class="panel-heading">Contact Info</div>
您缺少带有formGroupName
指令的组嵌套控件
营业地址
网站
电话
电子邮件
Facebook页面ID
继续
在HTML代码中
<form [formGroup]="userForm">
<input type="text" class="form-control" [value]="item.UserFirstName" formControlName="UserFirstName">
<input type="text" class="form-control" [value]="item.UserLastName" formControlName="UserLastName">
</form>
export class UserprofileComponent implements OnInit {
userForm: FormGroup;
constructor(){
this.userForm = new FormGroup({
UserFirstName: new FormControl(),
UserLastName: new FormControl()
});
}
}
这工作得很好，不会出现任何错误。对于我来说，即使是[formGroup]
也会出现错误“找不到名为：“””的控件
当我将ngModel
值与formControlName=“fileName”
一起添加到输入框时，它得到了修复
我试图动态生成一个表单，因为问题的数量取决于一个对象，对我来说，当我将ngDefaultControl
添加到我的mat表单字段时，错误被修复了
<form [formGroup]="questionsForm">
<ng-container *ngFor="let question of questions">
<mat-form-field [formControlName]="question.id" ngDefaultControl>
<mat-label>{{question.questionContent}}</mat-label>
<textarea matInput rows="3" required></textarea>
</mat-form-field>
</ng-container>
<button mat-raised-button (click)="sendFeedback()">Submit all questions</button>
</form>
我也有这个错误，你帮我解决了。
如果formGroup或formGroupName没有使用好的大小写，则找不到控件的名称。
更正formGroup或formGroupName的大小写，就可以了。对于我来说，控件名的大小写不同
在html中，它是accountID
，ts文件是accountID
更改案例以匹配两个已解决的我的案例。当您将属性formGroupName
指定给div，而不在.ts
文件中对其进行寻址时，通常会发生这种情况。您是否描述了此代码的版本。因为它在11小时内不起作用。获取错误：错误TS2339:类型“UserCreateComponent”上不存在属性“UserLastName”。Angular 4 version谢谢。。该代码在11中不起作用。
<form [formGroup]="questionsForm">
<ng-container *ngFor="let question of questions">
<mat-form-field [formControlName]="question.id" ngDefaultControl>
<mat-label>{{question.questionContent}}</mat-label>
<textarea matInput rows="3" required></textarea>
</mat-form-field>
</ng-container>
<button mat-raised-button (click)="sendFeedback()">Submit all questions</button>
</form>
sendFeedbackAsAgent():void {
if (this.questionsForm.valid) {
console.log(this.questionsForm.value)
}
}