Angular Reactive Form Array is only displaying 1 item from the array

Question

I am building a Reactive Form (edit/new) in Angular 12 which contains a Form Array called 'actions'. I have the Form working to submit new and update existing multiple items in the Array. The problem I have is when the edit form loads in the browser, only the first array item is displaying. The multiple items in the array are definitely being retrieved, just not displaying. Here is the code:

component.ts file

export class AdviceEditComponent implements OnInit {
id: number;
isAddMode: boolean;
adviceForm: FormGroup;
validationErrors: string[] = [];
actions: FormArray;

constructor(private route: ActivatedRoute,
            private adviceService: AdviceService,
            private router: Router, private fb: FormBuilder) {              
}

ngOnInit() {
  this.id = this.route.snapshot.params['id'];
      this.isAddMode = !this.id;

      this.adviceForm = this.fb.group({
        title: ['', Validators.required],
        description: ['', Validators.required],
        sourceUrl: ['', Validators.required],
        actions: this.fb.array([this.createAction()]) 
    });

    if (!this.isAddMode) {
        this.adviceService.getAdvice(this.id)
            .pipe(first())
            .subscribe(x => this.adviceForm.patchValue(x));
    }
}

createAction(): FormGroup {
  return this.fb.group({
    id: '0',
    what: '',
    how: ''
  });
}

get controls() { // a getter!
  return (<FormArray>this.adviceForm.get('actions')).controls;
}

onAddAction(): void {
  this.actions = this.adviceForm.get('actions') as FormArray;
  this.actions.push(this.createAction());
}
}

component.html file

<div class="row">
  <div class="col-sm-12">
    <form [formGroup]="adviceForm" (ngSubmit)="onSubmit()">
      <div class="row">
        <div class="col-sm-10">
          <div class="form-group">
            <label for="title">Title</label>
            <input type="text" id="title" formControlName="title" class="form-control">
            <span *ngIf="!adviceForm.get('title').valid && adviceForm.get('title').touched" class="help-block">
              Please enter a Title
            </span>

          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-10">
          <div class="form-group">
            <label for="description">Description</label>
            <textarea type="text" id="description" formControlName="description" class="form-control"
              rows="6"></textarea>
            <span *ngIf="!adviceForm.get('description').valid && adviceForm.get('description').touched"
              class="help-block">
              Please enter a Description
            </span>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-10">
          <div class="form-group">
            <label for="sourceUrl">Source Url</label>
            <input type="text" id="sourceUrl" class="form-control" formControlName="sourceUrl">
            <span *ngIf="!adviceForm.get('sourceUrl').valid && adviceForm.get('sourceUrl').touched" class="help-block">
              Please enter a Source Url
            </span>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-xs-12" formArrayName="actions">
          <div class="row" *ngFor="let action of adviceForm.get('actions')['controls']; let i = index" [formGroupName]="i"
            style="margin-top: 10px; margin-left: 15px;">

            <div class="col-xs-8 mr-2">
              <input type="text" class="form-control" formControlName="what">
            </div>

            <div class="col-xs-2 mr-2">
              <input type="text" class="form-control" formControlName="how">
            </div>
            <div class="col-xs-2">
              <button class="btn btn-danger">X</button>
            </div>
          </div>
          <hr class="ml-3">
          <div class="row">
            <div class="col-xs-12 ml-5">
              <button type="button" class="btn btn-success" (click)="onAddAction()">Add Action</button>
            </div>
          </div>

        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 mt-3 ml-3">
          <button type="submit" class="btn btn-success mr-2" [disabled]="!adviceForm.valid">Save</button>
          <button type="button" class="btn btn-danger" (click)="onCancel()">Cancel</button>
        </div>
      </div>
    </form>
  </div>
</div>

I have been struggling to solve this for hours and I just cannot see what I am doing incorrectly. Any help would be greatly appreciated. Thank you.

JsNgian · Accepted Answer · 2021-09-19 07:22:30Z

1

.patchValue() will update the existing FormArray. It will not create or delete the item from array. Here you are having only one item in the actions formArray.

Please try below code.

        this.adviceService.getAdvice(this.id)
            .pipe(first())
            .subscribe(x => {
                const actions = this.adviceForm.get('actions') as FormArray;
                actions.clear();
                x.actions.map(action => actions.push(this.createAction()))
                this.adviceForm.patchValue(x)
             });

answered Sep 19, 2021 at 7:22

JsNgian

8356 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Reactive Form Array is only displaying 1 item from the array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related