I am getting this error in every edit form of my application also i am getting an error "formGroup expects a FormGroup instance. Please pass one in." But I think I have done everything properly. Please review...
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>
I tried giving 2 div with display none,it is working some times, and if I remove them now I will not get first 3-4 fields. I am getting those all fields into my editForm. But they are not binding due to those 2 errors.
You build your reactive form inside of a subscribe callback, that executes in asynchronous way. Untill the form is not created, calling editForm.get will give an error. As a possible solution you can wrap form in a div with an *ngIf directive to make sure the form is available, like so:
<div *ngIf="editForm">
<form [formGroup]="editForm">
...
</form>
</div>