Angular 无法读取未定义的get属性
我在我的应用程序的每个编辑表单中都会遇到这个错误，而且我也会遇到一个错误“formGroup需要一个formGroup实例。请传入一个。” 但我想我已经把一切都做好了。请复习 编辑-account.component.ts：-Angular 无法读取未定义的get属性,angular,primeng-datatable,Angular,Primeng Datatable,我在我的应用程序的每个编辑表单中都会遇到这个错误，而且我也会遇到一个错误“formGroup需要一个formGroup实例。请传入一个。” 但我想我已经把一切都做好了。请复习 编辑-account.component.ts：- ngOnInit() { this.GetAccountByID(this.ID); this.getAllAccounts(); this.getAllCountries(); } getAllAccounts() { this
ngOnInit() {
this.GetAccountByID(this.ID);
this.getAllAccounts();
this.getAllCountries();
}
getAllAccounts() {
this._masterservice.getAllAccounts<Account[]>().subscribe(data => {
this.accounts = data;
});
}
GetAccountByID(id: string) {
let svc = this;
this._masterservice.getAccountByID<Account>(id).subscribe((data: Account) => {
if (data !== null) {
// svc.CurrentData=data;
svc.bindData(data);
} else {
console.warn('No data fround for ID-' + id);
}
});
}
bindData(tempData: Account) {
let _startDate: Date = new Date(tempData.startdate);
let _endDate: Date = new Date(tempData.duedate);
this.editForm = this.formBuilder.group({
id: [tempData.id],
name: [tempData.name, [Validators.required]],
country: [tempData.country],
currency: [tempData.currency],
duedate: [tempData.duedate ? _endDate : '', [Validators.required]],
startdate: [tempData.startdate ? _startDate : '', [Validators.required]],
contactperson: [tempData.contactperson],
contactno: [tempData.contactno, [Validators.required, Validators.pattern('^[0-9][0-9]{9}')]],
contactemail: [tempData.contactemail, [Validators.required, Validators.email]],
source: [tempData.source]
});
}
ngOnInit（）{
this.GetAccountByID（this.ID）；
这个.getAllAccounts（）；
这个.getAllCountries（）；
}
getAllAccounts（）{
此.u masterservice.getAllAccounts（）.subscribe（数据=>{
这个账户=数据；
});
}
GetAccountByID（id:string）{
设svc=this；
此._masterservice.getAccountByID（id）.subscribe（（数据：Account）=>{
如果（数据！==null）{
//svc.CurrentData=数据；
svc.bindData（数据）；
}否则{
console.warn（'ID-'+ID没有数据）；
}
});
}
bindData（临时数据：帐户）{
让_startDate:Date=新日期（tempData.startDate）；
让_endDate:Date=新日期（tempData.duedate）；
this.editForm=this.formBuilder.group({
id:[tempData.id]，
名称：[tempData.name，[Validators.required]]，
国家：[tempData.country]，
货币：[tempData.currency]，
duedate:[tempData.duedate？\u endDate:“[Validators.required]]，
startdate:[tempData.startdate？\u startdate:“[Validators.required]]，
联系人：[tempData.contactperson]，
contactno:[tempData.contactno，[Validators.required，Validators.pattern（'^[0-9][0-9]{9}'）]]，
contactemail:[tempData.contactemail，[Validators.required，Validators.email]]，
来源：[tempData.source]
});
}
<form [formGroup]="editForm">
<div class="form-group row">
<div class="col-md-6" style="display: none">
<div class="md-input-wrapper">
<label class="required">Name:</label>
<input type="text" class="md-form-control md-valid" formControlName="name" name="name"
id="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" />
<span class="md-line"></span>
<div *ngIf="submitted && f.name.errors" class="invalid-feedback error">
<div *ngIf="f.name.errors.required">Name required</div>
</div>
</div>
</div>
<div class="col-md-6" style="display: none">
<div class="md-input-wrapper">
<label>Contact person:</label>
<input type="text" class="md-form-control md-valid" formControlName="contactperson"
name="contactperson" id="contactperson">
<span class="md-line"></span>
</div>
</div>
<div class="col-md-6">
<div class="md-input-wrapper">
<label class="required">Name:</label>
<input type="text" class="md-form-control md-valid" formControlName="name" name="name"
id="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" />
<span class="md-line"></span>
<div *ngIf="submitted && f.name.errors" class="invalid-feedback error">
<div *ngIf="f.name.errors.required">Name required</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="md-input-wrapper">
<label>Contact person:</label>
<input type="text" class="md-form-control md-valid" formControlName="contactperson"
name="contactperson" id="contactperson">
<span class="md-line"></span>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<div class="md-input-wrapper">
<label class="required">Contact no:</label>
<input type="text" class="md-form-control md-valid " formControlName="contactno"
name="contactno" id="contactno"
[ngClass]="{ 'is-invalid': submitted && f.contactno.errors }" maxlength="10" />
<span class="md-line"></span>
<div *ngIf="submitted && f.contactno.errors" class="invalid-feedback error">
<div *ngIf="f.contactno.errors.required">Contact No is required</div>
<div *ngIf="editForm.get('contactno').hasError('pattern')">Contact No must be a valid
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="md-input-wrapper">
<label class="required">Contact email:</label>
<input type="text" class="md-form-control md-valid" formControlName="contactemail"
name="contactemail" id="contactemail"
[ngClass]="{ 'is-invalid': submitted && f.contactemail.errors }" />
<span class="md-line"></span>
<div *ngIf="submitted && f.contactemail.errors" class="invalid-feedback error">
<div *ngIf="f.contactemail.errors.required">Email is required</div>
<div *ngIf="f.contactemail.errors.email">Email must be a valid email address</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<div class="md-input-wrapper">
<label class="required">Start Date:</label>
<p-calendar class="md-form-control md-valid" formControlName="startdate" name="startdate"
id="startdate" [ngClass]="{'is-invalid': submitted && f.startdate.errors}"
showIcon="true">
</p-calendar>
<span class="md-line"></span>
<div *ngIf="submitted && f.startdate.errors" class="invalid-feedback error">
<div *ngIf="f.startdate.errors.required">Start Date required</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="md-input-wrapper">
<label class="required">Due Date:</label>
<p-calendar class="md-form-control md-valid" dataType="string" formControlName="duedate"
name="duedate" id="duedate" [ngClass]="{'is-invalid': submitted && f.duedate.errors}"
[minDate]="editForm.value.startdate" showIcon="true">
</p-calendar>
<span class="md-line"></span>
<div *ngIf="submitted && f.duedate.errors" class="invalid-feedback error">
<div *ngIf="f.duedate.errors.required">Due Date required</div>
</div>
<div *ngIf="smallDate" class="invalid-feedback error">Due Date must be greater</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
<div class="md-input-wrapper">
<label>Country:</label>
<select formControlName="country" name="country" id="country" type="text" class="md-form-control md-valid">
<option *ngFor="let obj of countries" [value]="obj.name">{{obj.name}}</option>
</select>
<span class="md-line"></span>
</div>
</div>
<div class="col-md-4">
<div class="md-input-wrapper">
<label>Currency:</label>
<input type="text" class="md-form-control md-valid" formControlName="currency"
name="currency" id="currency">
<span class="md-line"></span>
</div>
</div>
<div class="col-md-4">
<div class="md-input-wrapper">
<label>Source:</label>
<input type="text" class="md-form-control md-valid" formControlName="source" name="source"
id="source" />
<span class="md-line"></span>
</div>
</div>
</div>
<div class="mtb15">
<button (click)="onSubmit()" class="btn btn-success waves-effect waves-light">Update</button>
<button (click)=onCancel() class="btn btn-warning waves-effect waves-light">Cancel</button>
</div>
</form>
姓名：
所需名称
联系人：
姓名：
所需名称
联系人：
联络电话:
需要联系电话
联系人号码必须是有效的
联络电邮：
电子邮件是必需的
电子邮件必须是有效的电子邮件地址
开始日期：
要求的开始日期
到期日：
要求的截止日期
截止日期必须大于
国家：
{{obj.name}
货币：
资料来源：
更新
取消
我试着用display none给2个div，它有时会起作用，如果我现在删除它们，我将不会得到前3-4个字段。我正在把这些字段都放到我的编辑表单中。但是由于这两个错误，它们没有绑定。您在一个以异步方式执行的
subscribe被动表单。在未创建表单之前，调用editForm.get
将给出一个错误。作为一种可能的解决方案，您可以使用*ngIf指令将表单包装在div中，以确保表单可用，如下所示：
<div *ngIf="editForm">
<form [formGroup]="editForm">
...
</form>
</div>
...
这是什么svc？在您的模板中，当表单名为editForm
时，您正在使用变量f
进行验证？@JasonWhite是的，获取f（）{返回this.editForm.controls；}我这样做了，将所有控件都放入其中。@NikolaiKiefer，如您所见，我获取了let svc=this，我正在使用它来绑定来自API的数据，但仍有一些字段没有填充，而且我得到的错误是FormGroup@MayurSaner你能具体说明一下吗