changes in model through UI not reflect in the Form values in reactive forms

Question

I am using reactive forms and I have one text box and other item in form is matrix , which is basically array of objects.

Initilazation of form is done using following code :

initilazieForm(): void {
    this.specForm = this.fb.group({
      name: 'Enter specsheet name',
      matrix: this.fb.array(this.mat, [Validators.required])
    });
  }

and this.mat is as following

createBaseMatrix(): MatrixDTO[] {
    this.mat[this.mat.length] = new MatrixDTO();
    this.mat[0].name = 'Basic Weight(lbs/3000ft)';
    this.mat[0].customRow = false;
    this.mat[0].items.push({ label: '30', customCol: false });
    this.mat[0].items.push({ label: '35', customCol: false });
    this.mat[0].items.push({ label: '40', customCol: false });

    this.mat[this.mat.length] = new MatrixDTO();
    this.mat[1] = new MatrixDTO();
    this.mat[1].name = 'Basic Weight(g/m2)';
    this.mat[1].customRow = false;
    this.mat[1].items.push({ label: '34', customCol: false });
    this.mat[1].items.push({ label: '42', customCol: false });
    this.mat[1].items.push({ label: '68', customCol: false });

    return this.mat;
  }

I have two buttons on same form , which are used to insert custom row or columns ( text boxes ) , so that user can enter values.

but when I add custom row and columns , insert data into text boxes for each row or column and submit the forms those values doesn't reflect in this.mat as well on forms values

addRow() {
    console.log('add row clicked');
    this.mat[this.mat.length] = new MatrixDTO();
    this.mat[this.mat.length - 1].name = '';
    this.mat[this.mat.length - 1].customRow = true;
    let colsCount: number = this.mat[0].items.length;
    var i;
    for (i = 0; i < colsCount; i++) {
      this.mat[this.mat.length - 1].items.push({ label: '', customCol: true });
    }
    console.log(this.mat);
  }
  addColumn() {
    this.mat.forEach(x => x.items.push({ label: '', customCol: true }));
    console.log('add column clicked');
    console.log(this.mat);
  } 



<form [formGroup]="specForm" (ngSubmit)="submitForm()">
  <div class="container">
    <div class="row">
      <div class="col-9">
        <label for="name">Enter specsheet name</label>
        <input type="text" class="form-control" placeholder="Enter specsheet name" formControlName="name" id="name">

      </div>
      <div class="col-3">
        <button class="btn btn-primary" type="submit">Save</button>
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        <a (click)="addRow()">Insert Custom
          Row</a>
      </div>
      <div class="col-6">
        <a (click)="addColumn()">Insert
          Custom Column</a>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <div *ngFor="let row of mat" class="row">
          <div class="col-3">
            <span *ngIf="row.customRow===false">{{row.name}}</span>
            <input *ngIf="row.customRow==true"
                                        type="text" [value]="row.name">
          </div>
          <div *ngFor="let cols of row.items" class="col-1">
            <span *ngIf="cols.customCol===false"
                                        style="padding: 5px;">{{cols.label}}</span>
            <input *ngIf="cols.customCol===true"
                                        type="text" [value]="cols.label"
                                        class="numtext">
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

StackBLitz

I might be missing something in your code - but a formArray should contains formControl’s..? — MikeOne
– MikeOne, Commented Jun 16, 2021 at 17:32
are you talking about this line ? matrix: this.fb.array(this.mat, [Validators.required]) — rahularyansharma
– rahularyansharma, Commented Jun 16, 2021 at 17:36
No , this is array of object with that I initialize , sorry I am new to angular so not much idea , can you please check StackBlizt mentioned in question — rahularyansharma
– rahularyansharma, Commented Jun 16, 2021 at 18:11

ddev8 · Accepted Answer · 2021-06-20 12:54:05Z

1

if you want to stay with form logic, I would recommend creating a custom control for matrix presentation and use ControlValueAccessor. In the new component, you can manage data via ngModel and return the result to the parent form. Example.
P.S: there's a lot of room to optimizing code example, it was made fast to show logic, not a final clean solution. Cheers.

answered Jun 20, 2021 at 12:54

ddev8

612 bronze badges

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

Collectives™ on Stack Overflow

changes in model through UI not reflect in the Form values in reactive forms

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related