I tried angular reactive formArray inside another formArray. but, i got unfortunately error Controls' is null.
Beginner at angular. Help me.
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms';
import { Router } from '@angular/router';
interface eventPlatform {
value: string;
viewValue: string;
}
interface resourcePerson {
value: string;
viewValue: string;
}
@Component({
selector: 'app-create-event',
templateUrl: './create-event.component.html',
styleUrls: ['./create-event.component.css']
})
export class CreateEventComponent implements OnInit {
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
eventPlatforms: eventPlatform[] = [
{value: 'Google Meet', viewValue: 'Google Meet'},
{value: 'Zoom', viewValue: 'Zoom'},
];
resourcePersons: resourcePerson[] = [
{value: '1', viewValue: '1'},
{value: '2', viewValue: '2'},
];
deleteResourceButton = true;
deleteContactButton = false;
constructor(
private _formBuilder: FormBuilder,
private router: Router) { }
ngOnInit(): void {
this.firstFormGroup = this._formBuilder.group({
eventDepartmentCtrl: ['', Validators.required],
eventNameCtrl: ['', Validators.required],
eventPlatformCtrl: ['', Validators.required],
eventStartTimeCtrl: ['', Validators.required],
eventEndTimeCtrl: ['', Validators.required],
eventEventKeyTakeawaysCtrl: ['', Validators.required],
contactPersonCtrl: this._formBuilder.array([this.getContactPerson()], [Validators.required, Validators.minLength(1), Validators.maxLength(2)]),
resourcePersonCtrl: this._formBuilder.array([this.getResourcePerson()], [Validators.required, Validators.minLength(1), Validators.maxLength(3)]),
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required]
});
}
addEvent(){
this.router.navigate(['/portal']);
}
addDraft(){
this.router.navigate(['/portal']);
}
cancelCreate(){
this.router.navigate(['/portal']);
}
// Resource Person
get resourcePersonArray() {
return <FormArray>this.firstFormGroup.get("resourcePersonCtrl");
}
addResourcePerson(){
this.resourcePersonArray.push(this.getResourcePerson());
}
deleteResourcePerson(index){
this.resourcePersonArray.removeAt(index);
}
getResourcePerson(){
return this._formBuilder.group({
personNameCtrl: ['', Validators.required],
personDesignationCtrl: ['', Validators.required],
personCompanyCtrl: ['', Validators.required],
socialMediaCtrl: this._formBuilder.array([this.getSocialMedia()], [Validators.required, Validators.minLength(1), Validators.maxLength(2)])
})
}
// Contact Person
get contactPersonArray() {
return <FormArray>this.firstFormGroup.get("contactPersonCtrl");
}
addContactPerson(){
this.contactPersonArray.push(this.getContactPerson());
}
deleteContactPerson(index){
this.contactPersonArray.removeAt(index);
}
getContactPerson(){
return this._formBuilder.group({
contactNameCtrl: ['', Validators.required],
contactNumberCtrl: ['', Validators.required],
})
}
// Social media
get socialMediaArray() {
return <FormArray>this.firstFormGroup.get("socialMediaCtrl");
}
addSocialMedia(){
this.socialMediaArray.push(this.getSocialMedia());
}
deleteSocialMedia(index){
this.socialMediaArray.removeAt(index);
}
getSocialMedia(){
return this._formBuilder.group({
socialMediaNameCtrl: ['', Validators.required],
socialMediaLinkCtrl: ['', Validators.required],
})
}
}
<div fxLayout="row" fxLayoutAlign="center start" class="mat-typography">
<div fxFlex="50%" fxFlex.xs="95%">
<br>
<h3 class="mat-subheading-2 white-text">Create New Event</h3>
<div class="example-container mat-elevation-z8">
<mat-vertical-stepper linear #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out</ng-template>
<p>Event Details</p>
<div fxLayout="row" fxLayoutAlign="right" fxLayoutGap="25px" class="mat-typography">
<mat-form-field fxFlex="100%" appearance="outline">
<mat-label>Department</mat-label>
<input matInput placeholder="Department name" formControlName="eventDepartmentCtrl"
required>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="25px" class="mat-typography">
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Event name</mat-label>
<input matInput placeholder="Event name" formControlName="eventNameCtrl" required>
</mat-form-field>
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Platform</mat-label>
<mat-select formControlName="eventPlatformCtrl" required>
<mat-option *ngFor="let eventPlatform of eventPlatforms"
[value]="eventPlatform.value">
{{eventPlatform.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="25px" class="mat-typography">
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Event Start</mat-label>
<input matInput type="datetime-local" formControlName="eventStartTimeCtrl"
placeholder="Start date">
</mat-form-field>
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Event End</mat-label>
<input matInput type="datetime-local" formControlName="eventEndTimeCtrl"
placeholder="Start date">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="25px" class="mat-typography">
<mat-form-field fxFlex="100%" appearance="outline">
<mat-label>Event Key takeaways</mat-label>
<textarea matInput formControlName="eventEventKeyTakeawaysCtrl"
placeholder="Event Key Takeaways">
</textarea>
</mat-form-field>
</div>
<mat-divider></mat-divider>
<br>
<p>Contact Person Details</p>
<br>
<div formArrayName="contactPersonCtrl">
<div *ngFor="let item of contactPersonArray.controls; let i = index;" [formGroupName]="i">
<p>Contact Person: {{i+1}}</p>
<div fxLayout="row" fxLayoutAlign="right" fxLayoutGap="25px" class="mat-typography">
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Name</mat-label>
<input matInput placeholder="Person Name" formControlName="contactNameCtrl"
required>
</mat-form-field>
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Phone Number</mat-label>
<input matInput placeholder="Person Number" formControlName="contactNumberCtrl"
required>
</mat-form-field>
<div class="button-padding">
<button mat-icon-button color="primary"
*ngIf="contactPersonArray.controls.length < 2" (click)="addContactPerson()">
<mat-icon>add</mat-icon>
</button>
<button mat-icon-button color="warn"
*ngIf="contactPersonArray.controls.length > 1"
(click)="deleteContactPerson(i)">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
</div>
<mat-divider></mat-divider>
<br>
<p>Resource Person Details</p>
<br>
<div formArrayName="resourcePersonCtrl">
<div *ngFor="let person of resourcePersonArray.controls; let i = index;" [formGroupName]="i">
<p>Resource Person: {{i+1}}</p>
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="25px" class="mat-typography">
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Name</mat-label>
<input matInput placeholder="Person Name" formControlName="personNameCtrl"
required>
</mat-form-field>
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Designation</mat-label>
<input matInput placeholder="Person Designation"
formControlName="personDesignationCtrl" required>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="25px" class="mat-typography">
<mat-form-field fxFlex="100%" appearance="outline">
<mat-label>Company</mat-label>
<input matInput placeholder="Person Company" formControlName="personCompanyCtrl"
required>
</mat-form-field>
</div>
<div formArrayName="socialMediaCtrl">
<div *ngFor="let social of socialMediaArray.controls; let j = index;"
[formGroupName]="j">
<div fxLayout="row" fxLayoutAlign="right" fxLayoutGap="25px"
class="mat-typography">
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Social Media</mat-label>
<input matInput placeholder="Social Media Name"
formControlName="socialMediaNameCtrl" required>
</mat-form-field>
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Social Media Link</mat-label>
<input matInput placeholder="Social Mediua Link"
formControlName="socialMediaLinkCtrl" required>
</mat-form-field>
<div class="button-padding">
<button mat-icon-button color="primary"
*ngIf="socialMediaArray.controls.length < 2"
(click)="addSocialMedia()">
<mat-icon>add</mat-icon>
</button>
<button mat-icon-button color="warn"
*ngIf="socialMediaArray.controls.length > 1"
(click)="deleteSocialMedia(j)">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
</div>
<div class="button-padding">
<button mat-raised-button *ngIf="resourcePersonArray.controls.length < 3"
(click)="addResourcePerson()">Add</button>
<button mat-raised-button color="warn"
*ngIf="resourcePersonArray.controls.length > 1"
(click)="deleteResourcePerson(i)">Delete</button>
</div>
<br>
<br>
<mat-divider></mat-divider>
<br>
<br>
</div>
</div>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<mat-label>Captcha</mat-label>
<input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Previous</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
<p>You are now done.</p>
<div class="button-padding">
<button mat-button matStepperPrevious>Previous</button>
<button mat-button (click)="stepper.reset()">Reset</button>
<button mat-button color="warn" (click)="cancelCreate()">Cancel</button>
<button mat-raised-button (click)="addDraft()">Save Draft</button>
<button mat-raised-button color="primary" (click)="addEvent()">Submit</button>
</div>
</mat-step>
</mat-vertical-stepper>
</div>
</div>
I tried angular reactive formArray inside another formArray. but, i got unfortunately error Controls' is null.
Beginner at angular. Help me.
I tried angular reactive formArray inside another formArray. but, i got unfortunately error Controls' is null.
Beginner at angular. Help me.