'Error: Cannot find control with path: 'linkedUrns -> [object Object]'
I'm trying to create a widget which allows the user to enter Unique Reference Numbers (strings)
Here is the template for the component:
<div class="card foregroundlight backgrounddark" >
<div class="card-header">
<div class="d-flex align-items-center">
<div class="mr-auto">
<h4>Linked URNs</h4>
</div>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-secondary" (click)="addFormControl()">Add Linked URN</button>
<lib-tooltip-button fieldName="linkedUrns"></lib-tooltip-button>
</div>
</div>
</div>
<div *ngIf="linkedUrnsArray.controls?.length > 0" class="card-body" [formGroup]="formGroup">
<div formArrayName="linkedUrns">
<div [formControlName]="linkedUrn" *ngFor="let linkedUrn of linkedUrnsArray.controls; index as i">
<div class="row">
<div class="col-md-5">
<h5>URN</h5>
<div class="form-group">
<input class="form-control" formControlName="linkedUrn" placeholder="Enter URN">
</div>
</div>
<div>
<button class="button btn-danger" (click)="removeFormControl(i)" aria-label="delete">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
And the ts file:
import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormBuilder, FormArray, FormControl } from '@angular/forms';
import { ValidatorService } from '../../services/validator.service';
@Component({
selector: 'lib-app-linked-urns-widget',
templateUrl: './linked-urns-widget.component.html',
styleUrls: ['./linked-urns-widget.component.css']
})
export class LinkedUrnsWidgetComponent implements OnInit {
@Input() formGroup: FormGroup;
linkedUrnsArray: FormArray;
constructor(private formBuilder: FormBuilder/* , private validatorService: ValidatorService */) {
}
ngOnInit() {
this.linkedUrnsArray = this.formGroup.get('linkedUrns') as FormArray;
}
addFormControl() {
this.linkedUrnsArray.push(this.createNewLinkedUrn());
console.log('!!this.linkedUrnsArray', this.linkedUrnsArray);
}
createNewLinkedUrn(): FormControl {
return this.formBuilder.control(
''
/* ,this.validatorService.linkedUrnValidator */);
}
removeFormControl(i) {
this.linkedUrnsArray.removeAt(i);
}
}
You can see that the LinkedUrnsWidgetComponent takes an input of formGroup from it's parent - and I've logged that formGroup to the console so you can see that the linkedUrn formControl exists within it.
But I'm getting the following error, can anyone point me in the right direction?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|