I am new to angular and I am not too sure where I am going wrong with my form. So I have this in my html
<form [formGroup] = "newEntryForm">
value: {{newEntryForm.value|json}}
<div class="form-group">
<div class="text-center mb-1 col">
<div class="card">
<div class="card-body">
Account Infomation
</div>
</div>
</div>
<div class="row">
<!--Left side-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label mb-1">First Name</label>
<input formControlName = "Firstname" type="text" class="form-control" />
<div *ngIf="Firstname.invalid && Firstname.dirty"
class="text-danger"><small><strong>First Name Required</strong></small>
</div>
</div>
<div class="form-group">
<label class="control-label mb-1">Account Number</label>
<input type="text" class="form-control" placeholder="ACC#"
formControlName="AccountNumber" />
<div *ngIf="AccountNumber.invalid && (AccountNumber.dirty || AccountNumber.touched)"
class="text-danger"><small><strong>Account Number Required</strong></small>
</div>
</div>
</div>
<!--Right side-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label mb-1">Last Name</label>
<input type="text" class="form-control"
formControlName="Lastname" />
<div *ngIf="Lastname.invalid && (Lastname.dirty || Lastname.touched)"
class="text-danger"><small><strong>Last Name Required</strong></small>
</div>
</div>
<div class="form-group">
<label class="control-label mb-1">ID Number</label>
<input type="text" class="form-control" placeholder="SA ID Number *"
formControlName="IdNumber" />
<div *ngIf="IdNumber.invalid && (IdNumber.dirty || IdNumber.touched)"
class="text-danger"><small><strong>Valid SA Id required</strong></small>
</div>
</div>
</div>
</div>
<div class="text-center mb-1 col">
<div class="card">
<div class="card-body">
Contact Infomation
</div>
</div>
</div>
<div class="row">
<!--left-->
<div class="form-group">
<div class="col-md-4">
<label class="control-label mb-1">Mobile</label>
<input type="text" class="form-control" placeholder="072500000"
formControlName="TelMobile" />
<div *ngIf="TelMobile.invalid && (TelMobile.dirty || TelMobile.touched)"
class="text-danger"><small><strong>Mobile Number is invalid</strong></small>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<button class="btn btn-primary mt-4" type="button" (click)="toggleTel()">+ Tel</button>
</div>
</div>
<div *ngIf="addTel" class="col-md-6">
<div class="form-group">
<label class="control-label mb-1">Telephone Other</label>
<input type="text" class="form-control" placeholder="0"
formControlName="TelOther" />
</div>
</div>
<!--right-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label mb-1">Email Home</label>
<input type="text" class="form-control" placeholder="joe@mail.com"
formControlName="EmailHome" />
<div *ngIf="EmailHome.invalid && (EmailHome.dirty || EmailHome.touched)"
class="text-danger"><small><strong>Email Format is invalid</strong></small>
</div>
</div>
</div>
<div class="col-md-6">
<div *ngIf="addTel" class="form-group">
<label class="control-label mb-1">Telephone Home</label>
<input type="text" class="form-control" placeholder="0725000000"
formControlName="TelHome" />
</div>
</div>
<div class="col-md-6">
<div *ngIf="addTel" class="form-group">
<label class="control-label mb-1">Telephone Work</label>
<input type="text" class="form-control" placeholder="0725000000"
formControlName="TelWork" />
</div>
</div>
</div>
<!--Address section-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label mb-1">Address Line 1 </label>
<input formControlName="Address1Home" type="text" class="form-control" />
<div *ngIf="Address1Home.invalid && Address1Home.dirty"
class="text-danger"><small><strong>Address Required</strong></small>
</div>
</div>
</div>
Form is longer. My save function calls onSave. my .ts looks like this :
this.newEntryForm = this.fb.group({
Firstname: ['', Validators.required],
Lastname: ['', Validators.required],
AccountNumber: ['', [
Validators.required,
Validators.maxLength(25),
]],
IdNumber: ['', [Validators.required,
Validators.pattern('(?<Year>[0-9][0-9])(?<Month>([0][1-9])|([1][0-2]))(?<Day>([0-2][0-9])|([3][0-1]))(?<Gender>[0-9])(?<Series>[0-9]{3})(?<Citizenship>[0-9])(?<Uniform>[0-9])(?<Control>[0-9])'),
]],
Address1Home: ['', Validators.required],
Address2Home: ['', Validators.required],
Address3Home: ['', Validators.required],
PostalCodeHome: ['', Validators.required],
my OnSave function:
onSave(){
console.log(this.newEntryForm.value);
I also do have getters for each control in my .ts like this
get AccountNumber() {
return this.newEntryForm.get('AccountNumber');
}
get IdNumber() {
return this.newEntryForm.get('Id');
}
get Firstname() {
return this.newEntryForm.get('Firstname');
}
get Lastname() {
return this.newEntryForm.get('Lastname');
}
get EmailHome(){
return this.newEntryForm.get('EmailHome');
}
However I get a Cannot read property 'invalid' of null error and the form seems to be only keeping track of the Firstname, Lastname, Acc#, and ID but leaves everything else out. The form is a bit longer but I have shortened it for the question.
Any ideas of where I could be going wrong?Thanks :)