As I was setting up a form on a CRUD using Firebase, initially just storing name and number as string types, I decided to add more parameters of the same type. However, I encountered an issue with the error message "Unable to get property 'valid' of undefined or null reference". Despite trying a few fixes, I have not been able to resolve it successfully. Here's an excerpt from my .html file:
Contact-edit.html
<ion-header>
<ion-navbar color="primary">
<ion-title>{{ title }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form [formGroup]="form">
<ion-item>
<ion-label stacked>Unit</ion-label>
<ion-input type="text" formControlName="unit"></ion-input>
</ion-item>
<ion-item *ngIf="!form.controls.unit.valid && (form.controls.unit.dirty || form.controls.unit.touched)" color="danger">
<div [hidden]="!form.controls.unit.errors.required">
Field is required
</div>
</ion-item>
<ion-item>
<ion-label stacked>Address</ion-label>
<ion-input type="text" formControlName="address"></ion-input>
</ion-item>
<ion-item *ngIf="!form.controls.address.valid && (form.controls.address.dirty || form.controls.address.touched)" color="danger">
<div [hidden]="!form.controls.address.errors.required">
Field is required
</div>
</ion-item>
// More HTML code...
</form>
</ion-content>
In case it's helpful, here's the contact-edit.ts file:
import { ContactProvider } from './../../providers/contact/contact';
// Other imports...
@IonicPage()
@Component({
selector: 'page-contact-edit',
templateUrl: 'contact-edit.html',
})
export class ContactEditPage {
// Component code...
}
// Additional errors displayed:
<pre><code>> ERROR TypeError: Cannot read property 'valid' of undefined
at Object.eval [as updateDirectives] (ContactEditPage.html:33)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
// More error information...