我在我的应用程序的每个编辑表单中都遇到此错误，同时也出现错误“ formGroup需要一个FormGroup实例。请传入一个。” 但是我想我做得很好。请查看...
edit-account.component.ts：-
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]
});
}
edit-account.component.html：-
<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>
我尝试不显示2格，它工作了一段时间，如果现在删除它们，我将不会得到前3-4个字段。我正在将所有这些字段都放入我的editForm中。但是由于这两个错误，它们没有约束力。
答案 0 :(得分：3)
您可以在reactive form回调内部构建subscribe，该回调以异步方式执行。在不创建表单之前，调用editForm.get会产生错误。作为一种可能的解决方案，您可以使用* ngIf指令将表格包装在div中，以确保表格可用，例如：
<div *ngIf="editForm">
<form [formGroup]="editForm">
...
</form>
</div>