I have a nested group Angular form. I want to take the group's controls values and match the name of the controls to my JSON object - forms

Question

I have a small contact form that I have built using Angular. I want to validate the form and change the form data to JSON object.
Here's my Form:
<form [formGroup]="addContactForm" (ngSubmit)="onSubmit()" novalidate >
<div [hidden]="addcontactForm.submitted">
<div class="modal-body" style="overflow: auto">
<!-- create contact -->
<div style="padding: 0 0px 0px 25px;margin-top:30px;">
<div class="form-horizontal">
<span *ngIf="ACname.invalid && (ACname.dirty || ACname.touched)" class="has-error">
<span *ngIf="ACname.errors.required">
Last Name is required.
</span>
</span>
<!-- name -->
<div FormGroupName="ACname">
<div class="form-group" style="text-align:right" [ngClass]="{ 'has-error': ACname.addContactFirstName.invalid && (ACname.addContactFirstName.dirty || ACname.addContactFirstName.touched) }">
<label class="col-sm-3" for="addContactFirstName">First Name</label>
<div class="col-sm-7">
<input id="addFirstName"
formControlName="addContactFirstName"
class="form-control"
placeholder="Enter First Name" />
</div>
</div>
<div class="form-group" style="text-align:right" [ngClass]="{ 'has-error': ACname.addContactLastName.invalid && (ACname.addContactLastName.dirty || ACname.addContactLastName.touched) }">
<label class="col-sm-3" for="addContactLastName">Last Name</label>
<div class="col-sm-7">
<input id="addLastName"
class="form-control"
formControlName="addContactLastName"
placeholder="Enter Last Name" />
</div>
</div>
</div>
<div FormGroupName="ACcontactMethod">
<!-- office phone -->
<div class="form-group" style="text-align:right" [ngClass]="{ 'has-error': ACcontactMethod.addcontactForm.submitted && !ACcontactMethod.addContactOfficePhone.valid }">
<label class="col-sm-3" for="addContactOfficePhone">Office Phone</label>
<div class="col-sm-7">
<input id="addofcPhone"
type="text"
class="form-control"
formControlName="addContactOfficePhone"
placeholder="Enter Office Number" />
<span *ngIf="addContactOfficePhone.invalid && (addContactOfficePhone.dirty || addContactOfficePhone.touched)" class="has-error">
<span *ngIf="addContactLastName.errors.required">
Name is required.
</span>
</span>
</div>
</div>
<!-- mobile phone -->
<div class="form-group" style="text-align:right" [ngClass]="{ 'has-error': addcontactForm.submitted && !addContactMobilePhone.valid }">
<label class="col-sm-3" for="addContactMobilePhone">Mobile Phone</label>
<div class="col-sm-7">
<input id="addmobPhone"
type="text"
class="form-control"
formControlName="addContactMobilePhone"
placeholder="Enter Mobile Number" />
<span *ngIf="addContactMobilePhone.invalid && (addContactMobilePhone.dirty || addContactMobilePhone.touched)" class="has-error">
<span *ngIf="addContactMobilePhone.errors.required">
Name is required.
</span>
</span>
</div>
</div>
<!-- home phone -->
<div class="form-group" style="text-align:right" [ngClass]="{ 'has-error': addcontactForm.submitted && !addContactHomePhone.valid }">
<label class="col-sm-3" for="addContactHomePhone">Home Phone</label>
<div class="col-sm-7">
<input id="addhomPhone"
type="text"
class="form-control"
formControlName="addContactHomePhone"
placeholder="Enter Home Number" />
<span *ngIf="addContactHomePhone.invalid && (addContactHomePhone.dirty || addContactHomePhone.touched)" class="has-error">
<span *ngIf="addContactHomePhone.errors.required">
Name is required.
</span>
</span>
</div>
</div>
<!-- email -->
<div class="form-group" style="text-align:right" [ngClass]="{ 'has-error': addcontactForm.submitted && !addContactEmail.valid }">
<label class="col-sm-3" for="addContactEmail">Email</label>
<div class="col-sm-7">
<input id="addEmail"
type="email"
class="form-control"
formControlName="addContactEmail"
placeholder="Enter Email" />
<span *ngIf="addContactEmail.invalid && (addContactEmail.dirty || addContactEmail.touched)" class="has-error">
<span *ngIf="addContactEmail.errors.required">
Name is required.
</span>
</span>
</div>
</div>
<!-- chat id -->
<div class="form-group" style="text-align:right" [ngClass]="{ 'has-error': addcontactForm.submitted && !addContactChatId.valid }">
<label class="col-sm-3" for="addContactChatId">Chat ID</label>
<div class="col-sm-7">
<input id="addChatID"
type="text"
class="form-control"
formControlName="addContactChatId"
placeholder="Enter Chat ID" />
<span *ngIf="addContactChatId.invalid && (addContactChatId.dirty || addContactChatId.touched)" class="has-error">
<span *ngIf="addContactChatId.errors.required">
Name is required.
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" (click)="addcontactForm.reset()" data-dismiss="modal">Close</button>
<button type="submit"
class="btn btn-primary"
[disabled]="!addcontactForm.valid"
(click)="addContact(model);">
Add Contact
</button>
</div>
</div>
<div class="submitted-message" *ngIf="addcontactForm.submitted">
<p>You've submitted your contact, {{ addcontactForm.value.addContactFirstName }} {{ addcontactForm.value.addContactLastName }}!</p>
<button type="button" class="btn btn-default pull-left" (click)="addcontactForm.reset()" data-dismiss="modal">Close</button>
<button (click)="addcontactForm.resetForm({})">Add new Contact </button>
</div>
</form>
Here's my ts:
import { Component} from '#angular/core';
import { AppComponent } from '../app.component';
import { FormBuilder, Validators, FormGroup, FormControl } from '#angular/forms';
#Component({
selector: 'addcontactmodal',
templateUrl: 'addcontact.component.html'
})
export class AddContactModalComponent {
id: any;
addContactForm: FormGroup;
constructor(private _appComponent: AppComponent, private fb: FormBuilder) {
this.id = localStorage.getItem('Id');
this.addContactForm = this.fb.group({
ACname: new FormGroup({
addContactFirstName: new FormControl('', Validators.minLength(40)),
addContactLastName: new FormControl('', Validators.minLength(40)),
}),
ACcontactMethod: new FormGroup({
addContactOfficePhone: new FormControl('', Validators.minLength(20)),
addContactMobilePhone: new FormControl('', Validators.minLength(20)),
addContactHomePhone: new FormControl('', Validators.minLength(20)),
addContactEmail: new FormControl('', Validators.minLength(127)),
addContactChatId: new FormControl('', Validators.minLength(127))
})
});
}
// private method(s)
private addContact() {
let data = {
ChatId: this.fb.group('addContactChatId').value,
Email: addContactEmail,
FirstName: addContactFirstName,
HomePhone: addContactHomePhone,
MobilePhone: addContactMobilePhone,
LastName: addContactLastName,
OfficePhone: this.model.addContactOfficePhone
}
this._appComponent.signalRService.setAgentContact(this.id, data);
}
}
I want to:
Validate the form
Have the data output to JSON
I do not get any of the validation the form promises. It doesn't submit.
Errors:
nhandled Promise rejection: Cannot read property 'invalid' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'invalid' of undefined
at Object.View_AddContactModalComponent_0.co [as updateDirectives]

Answer 1

You are not using complete property paths for your validation messages. Here's a simplified template of yours:
<form [formGroup]="addContactForm" (ngSubmit)="onSubmit()" novalidate >
<!-- formGroupName - mark all form controls belonging to this group inside tag -->
<div formGroupName="ACname">
<input formControlName="addContactFirstName" />
<!-- use complete property path or do like follows! -->
<span *ngIf="addContactForm.hasError('minlength', 'ACname.addContactFirstName')">
Minlength 40
</span>
</div>
</form>
StackBlitz