Issue with Angular Dynamic Form

Question

Followed this Tutorial: https://angular.io/guide/dynamic-form to create a dynamic angular form. Everything has been working correctly. But now I am attempting to add a question type where the user can continue adding more fields for input. I am experiencing an issue similar to this persons issue: Angular 2 Form "Cannot find control with path"

But unfortunately I have been unable to find the fix. And the weirdest part is that if I console.print the entire form the formatting seems correct?

This is what I currently have:

HTML:

<div [formGroup]="form">


      <div class= "p-col-12" [ngSwitch]="question.controlType">

        <div *ngSwitchCase="'medmulttextbox'" [formArrayName]="question.key">
          <div
           *ngFor="let item of form.get(question.key).controls; let i = index;">
        <div [formGroupName]="i">
          <input pInputText (focus)="searchDrugs(question.key + i)" type="text" [id]="question.key + i + 'rxterms'" placeholder="Drug name" [formControlName]="drugName">
          <input pInputText type="text" [id]="question.key + i +'drug_strengths'" placeholder="Strength list" [formControlName]="stength">
        </div>
  </div>

  <!--<div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>-->
</div>

ts:

export class DynamicFormQuestionComponent implements AfterViewInit {
  @Input() question: QuestionBase<any>;
  @Input() form: FormGroup;
  get isValid() { return this.form.controls[this.question.key].valid; }

  constructor(private formBuilder: FormBuilder ) {
  }

  addField(questionKey) {
    console.log(this.form.get(questionKey));
    const formm = this.form.get(questionKey) as FormArray;
    formm.push(this.createItem());
  }

  createItem(): FormGroup {
    return this.formBuilder.group({
      drugName: '',
      stength: '',
    });
  }

}

question-control-service.ts

@Injectable()
export class QuestionControlService {
  constructor(private formBuilder: FormBuilder) { }

  toFormGroup(questions: QuestionBase<any>[] ) {
    let group: any = {};

    questions.forEach(question => {
      if (question.controlType !== 'medmulttextbox') {
        group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
          : new FormControl(question.value || '');
      } else {
        // group[question.key] = new FormArray([]);
        // group[question.key] = new FormControl(this.formBuilder.array([]));
        group[question.key] = this.formBuilder.array([]);
      }
    });
    return new FormGroup(group);
  }
}

error

ERROR Error: Cannot find control with path: 'medtextMultibox1 -> 0 -> '
    at _throwError (forms.js:2092)
    at setUpControl (forms.js:2000)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:4969)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:5572)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:5491)
    at checkAndUpdateDirectiveInline (core.js:18533)
    at checkAndUpdateNodeInline (core.js:19801)
    at checkAndUpdateNode (core.js:19763)
    at debugCheckAndUpdateNode (core.js:20397)
    at debugCheckDirectivesFn (core.js:20357)

console.log(form)

FormGroup {validator: null, asyncValidator: null, _onCollectionChange: ƒ, pristine: true, touched: false, …}
asyncValidator: null
     controls:
         brave: FormControl {validator: null, asyncValidator: null, 
                _onCollectionChange: ƒ, pristine: true, touched: false, …}
          emailAddress: FormControl {validator: ƒ, asyncValidator: null, 
                _onCollectionChange: ƒ, pristine: true, touched: false, …}
         firstName: FormControl {validator: ƒ, asyncValidator: null, 
                _onCollectionChange: ƒ, pristine: true, touched: false, …}
         medtextMultibox1: FormArray
                 asyncValidator: null
                 controls: Array(1)
                       0: FormGroup
                            asyncValidator: null
                            controls:
                                 drugName: FormControl {validator: null, 
                                           asyncValidator: null, 
                                           _onCollectionChange: ƒ, pristine: 
                                            true, touched: false, …}
                                 stength: FormControl {validator: null, 
                                           asyncValidator: null, 
                                           _onCollectionChange: ƒ, pristine: 
                                            true, touched: false, …}
...

can you create a ctackblitz of it? – Sadid Khan Feb 13 '19 at 03:58 — Sadid Khan, Feb 13 '19 at 03:58

score 0 · Accepted Answer · answered Feb 13 '19 at 03:59

You need to remove the [] from [formControlName]:

<input pInputText (focus)="searchDrugs(question.key + i)" type="text" [id]="question.key + i + 'rxterms'" placeholder="Drug name" formControlName="drugName">
<input pInputText type="text" [id]="question.key + i +'drug_strengths'" placeholder="Strength list" formControlName="stength">

It was trying to use variables named drugName and stength instead of string values.

Issue with Angular Dynamic Form

1 Answers1