CODEWITHSUNDEEP
htmlangulartypescriptngforngmodel
pri_91
pri_91

Reputation: 79

Using ngmodel in nested ngfor loop in angular and getting dynamic values in ngModel

I am trying to create the following screen using angular. But the thing is that I am unable to bind the values using ngModel. enter image description here

Following is the implementation I have tried on. Thanks in advance.

This is the model entity I am using to bind the values - patientModule.ts

export class PatientTestDetails {
    public testDate?: string;
    public specimenType?: string;
    public testPrinciple?: string;
    public remark?: string;
    public hemoglobin?: any;
    public wbcCount?: any;
    public rbcCount?: any;
    public meanPlateletVolume?: any;
    public plateletsCount?: any;
    public packedCellVolume?: any;
    public meanCorpuscularVolume?: any;
    public meanCorpuscularHb?: any;
    public meanCorpuscularHbConc?: any; 
    public rbcDistributionWidth?: any;
    public createdDate?: any;
    public modifiedDate?: any;
    public neutrophilsCount?: any;
    public absoluteNeutrophilsCount?: any;
    public eosinophilsCount?: any;
    public absoluteEosinophilsCount?: any;
    public absoluteBasophilsCount?: any;
    public lymphocytesCount?: any;
    public absoluteLymphocytesCount?: any;
    public monocytesCount?: any;
    public absoluteMonocytesCount?: any;
    public basophilsCount?: any
    constructor(
      testDate?: string,
      remark?: string,
      hemoglobin?: any,
      wbcCount?: any,
      rbcCount?: any,
      meanPlateletVolume?: any,
      plateletsCount?: any,
      packedCellVolume?: any,
      meanCorpuscularVolume?: any,
      meanCorpuscularHb?: any,
      meanCorpuscularHbConc?: any,
      rbcDistributionWidth?: any,
      neutrophilsCount?: any,
      absoluteNeutrophilsCount?: any,
      eosinophilsCount?: any,
      absoluteEosinophilsCount?: any,
      absoluteBasophilsCount?: any,
      lymphocytesCount?: any,
      absoluteLymphocytesCount?: any,
      monocytesCount?: any,
      absoluteMonocytesCount?: any,
      basophilsCount?: any
    ) {
      this.testDate = testDate;
      this.specimenType = 'swab';
      this.testPrinciple = 'RTPCR';
      this.remark = remark;
      this.hemoglobin = hemoglobin;
      this.wbcCount = wbcCount;
      this.rbcCount = rbcCount;
      this.meanPlateletVolume = meanPlateletVolume;
      this.plateletsCount = plateletsCount;
      this.packedCellVolume = packedCellVolume;
      this.meanCorpuscularVolume = meanCorpuscularVolume;
      this.meanCorpuscularHb = meanCorpuscularHb;
      this.meanCorpuscularHbConc = meanCorpuscularHbConc;
      this.rbcDistributionWidth = rbcDistributionWidth;
      this.neutrophilsCount = neutrophilsCount;
      this.absoluteNeutrophilsCount = absoluteNeutrophilsCount;
      this.eosinophilsCount = eosinophilsCount;
      this.absoluteEosinophilsCount = absoluteEosinophilsCount;
      this.basophilsCount = basophilsCount;
      this.absoluteBasophilsCount = absoluteBasophilsCount;
      this.lymphocytesCount = lymphocytesCount;
      this.absoluteLymphocytesCount = absoluteLymphocytesCount;
      this.monocytesCount = monocytesCount;
      this.absoluteMonocytesCount = absoluteMonocytesCount;
      this.createdDate = new Date().toISOString();
      this.modifiedDate = new Date().toISOString();
    }
  }

Below is my component file patientComponent.ts Have globally declared following arrays

testDetails = new PatientTestDetails(); // PatientTestDetails is the model specified above
test: any = [];

ngOnInit(): void {
for (let index = 0; index < 6 - 1; index++) { //iterated by 6 as I need 6 columns
   this.test.push(this.testDetails);
 }
}

Below is my template file. Used table for generating the above inputs as shown in image.

<table>
<tr>
   <td *ngFor="let detail of test; let i = index">
     <tr *ngFor="let item of detail | keyvalue">
         <span *ngIf="i === 0;">{{item.key}}</span> 
            <td>
                <input type="text" class="form-control" id="dayWiseData" 
                name="day1" [(ngModel)]="item.value" />
              </td>
          </tr>
          </td>
        </tr>
</table>

Wrt this ngModel I am not able to bind the user input values. Please suggest me the right way to bind the values. Thank you.

Upvotes: 1

Views: 1593

Answers (1)

Kinglish
Kinglish

Reputation: 23654

Using your code, I was able to get it through:

<td *ngFor="let detail of test; let i = index">
  <tr *ngFor="let item of detail | keyvalue; let u = index">
    <span *ngIf="i === 0;">{{item.key}}</span>
    <td>
      <input type="text" class="form-control" id="dayWiseData"
                name="day1" [(ngModel)]="test[i][u]" />
    </td>

ngModel with 2 way binding must be able to reference an actual value in scope. Once you're nesting in arrays, you can't bind it to the inner nested reference. Rather(in this case) reference the main datasource and the path to that value. I am using numeric indexes of a data array here, but it could easily be an object reference [(ngModel)]="test[patient.id][medtest.id]"

How to use 2d array on ngmodel in angular 2?

Upvotes: 1

Related Questions