error : cannot find control path in FormArray

C# Corner

"sarReqTable" class="table table-bordered">

Select

Request No

Company

Email Address

First Name

Last Name

User ID

Start Date

End Date

User Type

Request Type

Resource Access

Comments

Update

Approver Details

"sarIndex" *ngFor="let details of getSarDetail().controls; let sarIndex = index">

"text-align:center">

class="fa fa-plus" style="cursor:pointer;" (click)="addSARRow()">

class="fa fa-trash" style="cursor:pointer;" (click)=" deleteSARRow(j)">

"text-align:center">

class="form-control" formControlName="selected" type="checkbox" />

class="form-control-label" style="text-align:center !important; font-weight:bold; font-size:13px;" formControlName="requestNum" type="text" disabled />

class="input-field">

"company"

[data]="companyList" [debounceTime]="800" (selected)='selectEventCompany($event)'

[searchKeyword]="keyword" (inputChanged)="enteredCompanyValue($event)" (closed)="closedCompanyAuto()"

[itemTemplate]="itemTemplate1" required>

class="appkiticon icon-search-outline a-font-16 a-text-grey sar" type='button' data-target="#SarCompanyModalWindow" data-toggle="modal">

"item.name">

class="form-control" formControlName="userEmail" type="text" value="{{loggedInUserEmail}}" />

class="form-control" formControlName="userFirstName" type="text" />

class="form-control" formControlName="userLastName" type="text" />

class="form-control" formControlName="userId" type="text" />

"fill"

"startDate" matInput [matDatepicker]="pickerStartDate">

for

]="pickerStartDate">

"fill"

"endDate" matInput [matDatepicker]="pickerEndDate">

for

]="pickerEndDate">

class="input-field">

class="a-selector a-select" formControlName="userType">

"" selected disabled hidden>

Select

"let user of UsertypeDetails">{{user.name}}

class="input-field">

class="a-selector a-select" formControlName="requestType">

"" selected disabled hidden>

Select

"let req of RequestTypeDetails">{{req.name}}

"text-align:center;">

"" (click)="selectedSarRow(sarIndex)" id="resource" data-target="#SARSecurityModal" data-toggle="modal">Resource

"text-align:center">

"" (click)="selectedSarRow(sarIndex)" id="comment" data-target="#SARCommentModal" data-toggle="modal">Comments

"true"

class="modal a-modal fade" id="SARCommentModal" role="dialog" tabindex="-1">

class="modal-dialog a-modal-lg" role="document">

class="modal-content" role="document">

class="modal-content bt-active-wrapper">

class="a-modal-header">

class="flex-fill">

class="a-h4">Comment Section

"Close"

class="icon-wrapper" data-dismiss="modal">

class="appkiticon icon-close-fill a-close-btn">

class="a-modal-body">

class="d-flex flex-column ">

"5" aria-label="Textarea in modal" class="a-text-field txt-input text-input-level4"

(change)=commentChange($event.target.value)>

class="a-modal-footer">

class="button-operation">

"Close"

class="a-btn a-btn-transparent a-btn-lg a-btn-gray comment-cancel" data-dismiss="modal">CANCEL

class="a-btn a-btn-transparent a-btn-lg comments-add bt-control" (click)="saveComment()" data-dismiss="modal">ADD

"text-align:center">

"button" class="appkiticon icon-save-outline" (click)="UpdateSarSingleRequest(details,j)">

"button" class="appkiticon icon-refresh-outline" (click)="resetRequest()">

"enableApproverDetail" type="button" class="a-btn a-btn-transparent a-btn-lg" data-target="#ApproverDetailModal" data-toggle="modal" (click)="approvarDetail()">List

"true"

class="modal a-modal fade" id="ApproverDetailModal" role="dialog" tabindex="-1">

class="modal-dialog a-modal-xl" id="approvalModal" role="document">

class="modal-content">

class="a-modal-header">

class="flex-fill">

class="a-h4">Approver Detail

"Close"

class="icon-wrapper" data-dismiss="modal">

class="appkiticon icon-close-fill a-close-btn">

"approverTable" *ngIf="showDetailsTable" class="center table table-striped table-bordered table-hover approverTable">

"background-color: #7D7D7D;">

Level

Approver Detail

"let item of sarApproverDetailsArray;" style="font-size:12px;text-align:center;">

class="norecords" *ngIf="!showDetailsTable">

No records to display

"true"

class="modal a-modal fade" id="SARSecurityModal" role="dialog" tabindex="-1">

class="modal-dialog a-modal-lg" role="document">

class="modal-content">

class="a-modal-header">

class="flex-fill">

class="a-h4">Resource Access

"Close"

class="icon-wrapper" data-dismiss="modal">

class="appkiticon icon-close-fill a-close-btn">

class="a-modal-body">

"sarSecTable" class="table table-bordered" formArrayName="sarSecDetails">

Environment

Resource Type

Resource

Entitlement

"sarSecIndex" *ngFor="let details of getSarSecAccessDetail(sarIndex).controls; let sarSecIndex = index">

"text-align:center">

class="fa fa-plus" style="cursor:pointer;" (click)="addSecResourceRow(sarIndex,sarSecIndex)">

class="fa fa-trash" style="cursor:pointer;" (click)="deleteSecResourceRow(s,j)">

"text-align:center">

class="input-field">

class="a-selector a-select" formControlName="enviorement" (change)="onEnvSelect($event.target.value)">

"" selected disabled hidden>

Select

"let env of environmentList">{{env.name}}

"text-align:center">

class="input-field">

class="a-selector a-select" formControlName="resourceType" (change)="onUserTypeSelect($event.target.value)">

"" selected disabled hidden>

Select

"let res of resourceType">{{res}}

"text-align:center">

class="input-field">

class="a-selector a-select" formControlName="resource" (change)="onResourceSelect($event.target.value)">

"" selected disabled hidden>

Select

"{{res.resourceId}}" *ngFor="let res of resourceList">{{res.name}}

"text-align:center">

class="input-field">

class="a-selector a-select" formControlName="entitlement" (change)="onEntitiledSelect($event.target.value)">

"" selected disabled hidden>

Select

"{{ent.entitlementId}}" *ngFor="let ent of resourceEntitlementsList">{{ent.entitlementName}}

class="a-modal-footer">

"Close"

class="a-btn a-btn-secondary a-btn-lg a-btn-negative" data-dismiss="modal" style="margin-right: 20px;">CANCEL

"Close"

class="a-btn a-btn-primary a-btn-lg" data-dismiss="modal" (click)="entitledIdSaveSARForm()">SAVE

"Close"

class="a-btn a-btn-primary a-btn-lg" type="submit" (click)="submitSARForm(sarRequestForm.value)">Save All

import { Component, OnInit } from '@angular/core';
import { date } from '@rxweb/reactive-form-validators';
import { CompanyDetails } from '../Model/CompanyDetails';
import { PortalService } from '../Service/portal.service';
import { MatTableDataSource } from '@angular/material';
import { ToastrService } from 'ngx-toastr';
import { StatusMessage } from '../Model/StatusMessages';
import { ResourceGrid } from '../Model/ResourceGrid';
import { Environment } from '../Model/Environment';
import { Resource } from '../Model/Resource';
import { ResourceEntitlement } from '../Model/ResourceEntitlement';
import { AuthService } from '../auth.service';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
import { UserType } from '../Model/UserType';
import { RequestType } from '../Model/RequestType';
import { FormattedError } from '@angular/compiler';
import { SARDetails } from '../Model/SARDetails';
import { SARApproverDetails } from '../Model/SARApproverDetails';
import { parse } from 'url';
@Component({
selector: 'app-security-access-form',
templateUrl: './security-access-form.component.html',
styleUrls: ['./security-access-form.component.css']
})
export class SecurityAccessFormComponent implements OnInit {
serviceUnavilableMsg: string;
showSpinner = false;
submitSucessMsg: string;
submitFailedMsg: string;
headerStr: string;
keyword = 'name';
latestRequestNumber: string;
constructor(private service: PortalService, private toastr: ToastrService, private formBuilder: FormBuilder, public auth: AuthService) {
}
resourceArray: Array = [];
sarDetailsArray: SARDetails[] = [];
inputDetails: SARDetails[] = [];
sarApproverDetailsArray: SARApproverDetails[] = [];
newSARApproverDetail: SARApproverDetails[] = [];
sarRequest: SARDetails[] = [];
singleSARRequest: SARDetails[] = [];
selectedSARrowIndex: string;
textComment: string;
generatedInidentList: string[] = [];
companyList: CompanyDetails[] = [];
filterArray: SARDetails[] = [];
dataSourceCompany: MatTableDataSource;
displayedCompanyColumns: string[] = ['name'];
environmentList: Environment[] = [];
selectedCompany: string;
commentStr: string;
environmentCompanyList: Environment[] = [];
resourceList: Resource[] = [];
resourceType: string[] = [];
resourceEntitlementsList: ResourceEntitlement[] = [];
statusMessages: StatusMessage[] = [];
UsertypeDetails: UserType[] = [];
RequestTypeDetails: RequestType[] = [];
loggedInUserEmail: string;
selectedSARrequest: string;
hideAfterSave: boolean;
entitiledStr: string[] = [];
sarRequestForm: FormGroup;
sarDetail: FormArray;
sarSecDetails: FormArray;
showDetailsTable: boolean;
enableApproverDetail: boolean;
sarSecAccessForm: FormGroup;
sarSecAccessDetail: FormArray;
ngOnInit(): void {
this.headerStr = '';
this.commentStr = '';
this.selectedSARrowIndex = '';
this.textComment = '';
this.dataSourceCompany = new MatTableDataSource();
this.selectedSARrequest = '';
this.selectedCompany = '';
this.hideAfterSave = true;
this.enableApproverDetail = false;
this.showDetailsTable = true;
this.entitiledStr = [];
this.loggedInUserEmail = this.auth.getUserDetails('email');
this.getCompanies();
this.getFormHeader();
this.getUserType();
this.getRequestType();
this.getEnvironments();
this.getResourceEntitlements();
this.getResources();
this.latestRequestNumber = '';
this.createSARSubmitForm();
}
createSARSubmitForm() {
this.sarRequestForm = this.formBuilder.group({
sarDetail: this.formBuilder.array([this.createSARFormArray()])
});
}
createSARFormArray(): FormGroup {
return this.formBuilder.group({
selected: [false],
requestNum: [''],
company: [''],
userEmail: [''],
userFirstName: [''],
userLastName: [''],
userId: [''],
startDate: [''],
endDate: [''],
userType: [''],
requestType: [''],
comment: [''],
entitledId: [''],
submitted: [false],
sarSecDetails: new FormArray([this.createSARSecDetailArray()])
});
}
createNewSARFormArray(): FormGroup {
return this.formBuilder.group({
selected: [false],
requestNum: [''],
company: [''],
userEmail: [''],
userFirstName: [''],
userLastName: [''],
userId: [''],
startDate: [''],
endDate: [''],
userType: [''],
requestType: [''],
comment: [''],
entitledId: [''],
submitted: [false],
sarSecDetails: new FormArray([this.createSARSecDetailArray()])
});
}
createSARSecDetailArray(): FormGroup {
return this.formBuilder.group({
secRequestNum: [''],
enviorement: [''],
resource: [''],
resourceType: [''],
entitlement: [''],
});
}
createNewSARSecDetailArray(): FormGroup {
return this.formBuilder.group({
secRequestNum: [''],
enviorement: [''],
resource: [''],
resourceType: [''],
entitlement: [''],
});
}
getSarDetail(): FormArray {
return this.sarRequestForm.get('sarDetail') as FormArray
}
getSarSecAccessDetail(sarIndex: number): FormArray {
const index = parseInt(this.selectedSARrowIndex);
if (index) {
return this.getSarDetail().at(index).get('sarSecDetails') as FormArray;
}
else {
return this.getSarDetail().at(0).get('sarSecDetails') as FormArray;
}
}
addSARRow() {
this.getSarDetail().push(this.createNewSARFormArray());
}
addSecResourceRow(i) {
const index = parseInt(this.selectedSARrowIndex);
const control = this.sarRequestForm.get('sarDetail');
const sarFormArray = control.at(index).get('sarSecDetails')['controls'];
sarFormArray.push(this.createSARSecDetailArray());
}
getFormHeader() {
this.headerStr = '';
this.service.getmenu().subscribe((res) => {
if (res) {
const header = res.find(i => i.name == 'SecurityAccessRequest');
this.headerStr = header['title'] == null ? '' : header['title'];
}
else {
this.headerStr = '';
}
}, (error) => {
this.headerStr = '';
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
);
}
getRequestType() {
this.service.getRequestType().subscribe((res) => {
if (res.length > 0) {
this.RequestTypeDetails = res;
}
else {
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
},
(error) => {
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
);
}
getUserType() {
this.service.getUserTpe().subscribe((res) => {
if (res.length > 0) {
this.UsertypeDetails = res;
}
else {
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
},
(error) => {
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
);
}
deleteSecResourceRow(secindex, sarindex) {
if (secindex > 0 && sarindex >= 0) {
const sarArray = this.sarRequestForm.get('sarDetail');
const sarArrayIndex = sarArray.at(sarindex)['controls'];
const sarSecArray = sarArrayIndex['sarSecDetails'];
sarSecArray.removeAt(secindex);
}
}
selectEventCompany(Companydata) {
this.selectedCompany = '';
const compId = Companydata['companyID'];
this.selectedCompany = compId;
this.enableApproverDetail = true;
}
enteredCompanyValue(any) {
}
closedCompanyAuto() {
}
deleteRow(index) {
if (this.resourceArray.length == 1) {
return false;
} else {
this.resourceArray.splice(index, 1);
return true;
}
}
selectedSarRow(index) {
this.selectedSARrowIndex = index;
//const sarSecAccessForm = this.sarSecAccessForm.get('sarSecAccessDetail') as FormArray;
//const sarSecResourceArray = sarSecAccessForm['controls'];
//for (var i = 0; i < sarSecResourceArray.length; i++)
//{
// sarSecResourceArray[i]['controls']['entitlement'].setValue('');
// sarSecResourceArray[i]['controls']['enviorement'].setValue('');
// sarSecResourceArray[i]['controls']['resource'].setValue('');
// sarSecResourceArray[i]['controls']['resourceType'].setValue('');
//}
}
commentChange(comment) {
this.commentStr = '';
this.commentStr = comment;
}
saveComment() {
this.textComment = '';
this.textComment = this.commentStr;
const index = parseInt(this.selectedSARrowIndex);
const sarArray = this.sarRequestForm.get('sarDetail');
const sarArrayIndex = sarArray.at(index)['controls'];
if (sarArrayIndex) {
sarArrayIndex['comment'].setValue(this.textComment);
}
}
approvarDetail() {
this.getSARApproverDetails();
}
submitSARForm(sarFormData) {
this.showSpinner = true;
this.sarRequest = [];
this.sarDetailsArray = [];
if (sarFormData.sarDetail != null && sarFormData != null) {
this.sarDetailsArray = sarFormData.sarDetail;
this.sarDetailsArray = this.sarDetailsArray.filter(x => x.submitted == false);
if (this.sarDetailsArray.length > 0) {
for (var i = 0; i < this.sarDetailsArray.length; i++) {
var inputDetails = new SARDetails();
const companyDetails = this.sarDetailsArray[i]['company'];
inputDetails.companyId = companyDetails['companyID'];
if (this.sarDetailsArray[i]['userEmail']) {
inputDetails.emailAddress = this.sarDetailsArray[i]['userEmail'];
}
else {
inputDetails.emailAddress = this.loggedInUserEmail;
}
inputDetails.firstName = this.sarDetailsArray[i]['userFirstName'];
inputDetails.lastName = this.sarDetailsArray[i]['userLastName'];
inputDetails.requestType = this.sarDetailsArray[i]['requestType'];
inputDetails.userId = this.sarDetailsArray[i]['userId'];
inputDetails.userType = this.sarDetailsArray[i]['userType'];
inputDetails.comments = this.sarDetailsArray[i]['comment'];
inputDetails.startDate = this.sarDetailsArray[i]['startDate'];
inputDetails.endDate = this.sarDetailsArray[i]['endDate'];
inputDetails.submittedBy = this.loggedInUserEmail;
inputDetails.entitledId = this.sarDetailsArray[i].entitledId;
this.sarRequest.push(inputDetails);
}
}
}
this.service.postNewSARRequest(this.sarRequest).subscribe((res) => {
if (res) {
this.generatedInidentList = res['generatedIncidentList'];
const sarDetailRows = this.sarRequestForm.get('sarDetail') as FormArray;
const sarRows = sarDetailRows['controls'];
for (var i = 0; i < sarRows.length; i++) {
const alreadySubmitted = sarRows[i]['controls']['submitted'].value;
if (alreadySubmitted == false) {
const rowSubmitted = sarRows[i]['controls'];
for (var j = 0; j < this.generatedInidentList.length; j++) {
rowSubmitted['requestNum'].setValue(this.generatedInidentList[j]);
rowSubmitted['submitted'].setValue(true);
break;
}
}
}
this.showSpinner = false;
}
else {
this.showSpinner = false;
}
},
(error) => {
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
);
this.showSpinner = false;
}
UpdateSarSingleRequest(singleSARData, index) {
const arrayData = singleSARData['controls'];
const reqNum = arrayData['requestNum'].value;
var inputDetails = new SARDetails();
inputDetails.requestNumber = reqNum;
const companyDetails = arrayData['company'].value;
inputDetails.companyId = companyDetails['companyID'];
if (arrayData['userEmail'].value) {
inputDetails.emailAddress = arrayData['userEmail'].value;
}
else {
inputDetails.emailAddress = this.loggedInUserEmail;
}
inputDetails.firstName = arrayData['userFirstName'].value;
inputDetails.lastName = arrayData['userLastName'].value;
inputDetails.requestType = arrayData['requestType'].value;
inputDetails.userId = arrayData['userId'].value;
inputDetails.userType = arrayData['userType'].value;
inputDetails.comments = arrayData['comment'].value;
inputDetails.startDate = arrayData['startDate'].value;
inputDetails.endDate = arrayData['endDate'].value;
inputDetails.submittedBy = this.loggedInUserEmail;
inputDetails.entitledId = arrayData['entitledId'].value;
this.service.updateSARRequestDetail(inputDetails).subscribe((res) => {
if (res) {
}
else {
}
});
}
resetRequest() {
this.sarRequestForm.enable();
this.hideAfterSave = true;
}
copySARDetails(sarDetails) {
this.filterArray = sarDetails['sarDetail'];
this.filterArray = this.filterArray.filter(x => x.selected == true);
const control = this.sarRequestForm.get('sarDetail') as FormArray;
for (var i = 0; i < this.filterArray.length; i++) {
control.push(this.createCopyRow(this.filterArray[i]));
}
this.resetCopySelector();
}
resetCopySelector() {
const rows = this.sarRequestForm.get('sarDetail') as FormArray;
const controllsArray = rows['controls'];
for (var i = 1; i < controllsArray.length; i++) {
//controllsArray['selected'] = false;
}
}
createCopyRow(copyArrayValue): FormGroup {
return this.formBuilder.group({
selected: false,
requestNum: '',
company: copyArrayValue['company']['name'],
userEmail: copyArrayValue['userEmail'],
userFirstName: copyArrayValue['userFirstName'],
userLastName: copyArrayValue['userLastName'],
userId: copyArrayValue['userId'],
startDate: copyArrayValue['startDate'],
endDate: copyArrayValue['endDate'],
userType: copyArrayValue['userType'],
requestType: copyArrayValue['requestType'],
comment: copyArrayValue['comment'],
entitledId: copyArrayValue['entitledId'],
});
}
entitledIdSaveSARForm() {
const index = parseInt(this.selectedSARrowIndex);
this.entitiledStr = [];
const sarArray = this.sarRequestForm.get('sarDetail');
const sarArrayIndex = sarArray.at(index)['controls'];
const sarSecArray = sarArrayIndex['sarSecDetails'];
for (var i = 0; i < sarSecArray.length; i++) {
const controlArray = sarSecArray.at(i)['controls'];
const entitleId = controlArray['entitlement'].value;
this.entitiledStr.push(entitleId);
}
if (sarArrayIndex) {
const entitledStr = this.entitiledStr.join(',');
sarArrayIndex['entitledId'].setValue(entitledStr);
}
}
deleteSARRow(index) {
if (index > 0) {
const control = this.sarRequestForm.get('sarDetail') as FormArray;
control.removeAt(index);
}
}
getStatusMessage() {
this.service.getStatusMessages().subscribe((res) => {
if (res.length > 0) {
this.statusMessages = res;
const sucessArray = this.statusMessages.find(i => i.messageType == 'createincidentsuccess');
this.submitSucessMsg = sucessArray['messageText'];
const errorArray = this.statusMessages.find(i => i.messageType == 'createincidentfailure');
this.submitFailedMsg = errorArray['messageText'];
const serviceArray = this.statusMessages.find(i => i.messageType == 'serviceUnavilable');
this.serviceUnavilableMsg = serviceArray['messageText'];
}
else {
this.statusMessages = [];
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
}, (error) => {
this.statusMessages = [];
setTimeout(() => {
this.serviceUnavilable();
}, 500);
});
}
getCompanies() {
this.service.getcompanies().subscribe((res) => {
if (res.length > 0) {
this.companyList = res;
this.dataSourceCompany.data = this.companyList;
}
else {
this.companyList = [];
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
},
(error) => {
this.companyList = [];
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
);
}
getEnvironments() {
this.service.getEnvironments().subscribe((res) => {
if (res.length > 0) {
this.environmentList = res;
}
else {
this.environmentList = [];
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
},
(error) => {
this.environmentList = [];
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
);
}
getResources() {
this.service.getResources().subscribe((res) => {
if (res.length > 0) {
this.resourceList = res;
if (this.resourceList) {
for (var i = 0; i < this.resourceList.length; i++) {
const resType = this.resourceList[i].resourceType;
this.resourceType.push(resType)
}
}
}
else {
this.resourceList = [];
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
},
(error) => {
this.resourceList = [];
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
);
}
getResourceEntitlements() {
this.service.getResourceEntitlements().subscribe((res) => {
if (res.length > 0) {
this.resourceEntitlementsList = res;
}
else {
this.resourceEntitlementsList = [];
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
},
(error) => {
this.resourceEntitlementsList = [];
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
);
}
onEnvSelect(EnvSelected) {
}
onUserTypeSelect(UserTypeSelected) {
}
onResourceSelect(ResourceSelected) {
}
onEntitiledSelect(EntitiledSelected) {
}
serviceUnavilable() {
this.toastr.error(this.serviceUnavilableMsg, '', {
timeOut: 1000
});
}
getSARApproverDetails() {
this.sarApproverDetailsArray = [];
this.newSARApproverDetail = [];
this.service.getSARApproverDetails(this.selectedCompany).subscribe((res) => {
if (res.length > 0) {
for (var i = 0; i < res.length; i++) {
const tier = res[i].approvalTier;
const user = res[i].userid;
this.newSARApproverDetail.push({ approvalTier: tier, userid: user });
}
this.sarApproverDetailsArray = [];
this.sarApproverDetailsArray = this.newSARApproverDetail;
this.showDetailsTable = true;
}
else {
this.showDetailsTable = false;
}
},
(error) => {
setTimeout(() => {
this.serviceUnavilable();
}, 500);
}
);
}
}

Replies

Know the answer? Post it — somebody with the same question will find it here.