CODEWITHSUNDEEP
angularangular-reactive-formsangular7formarray
alim1990
alim1990

Reputation: 4972

Angular 7 reactive form how to get the text of a selected value instead of the value in drop list form control

I there a way to get the text of the selected value of a drop down list instead of getting the value, in reactive forms ?

My Script is as the following:

<form [formGroup]="formGroup" formArrayName="test">
    <ng-container matColumnDef="fr" formArrayName="test">
            <th mat-header-cell *matHeaderCellDef> Family Rel. </th>
            <td mat-cell *matCellDef="let element; let i = index;">
              <div [formGroupName]="i">
                <mat-form-field color="warn" >
                    <mat-label>Family Relation</mat-label>
                    <mat-select (selectionChange)="onChange(element, i)" id="family_relation" formControlName="fr" placeholder="Family Relation">                 
                          <mat-option *ngFor="let familyRelation of familyRelationArray;" [value]="familyRelation.family_relation_id">
                        {{familyRelation.family_relation_type}}
                      </mat-option>
                    </mat-select>
                  </mat-form-field>&nbsp;
                </div>
            </td>
          </ng-container>
</form>

And on change selection (selectionChange="onChange(element, i)"), I need to get both selected value and text of it.

onChange(data, i)
  {
    let group = (<FormArray>this.formGroup.get('test')).at(i).value;
    let newFr = group['fr'];
    console.log('Value: '+newFr);
  }

Where data is the selected row, and i is the index of the selected Form Array.

I tried use the old javascript method:

<HTMLSelectElement>document.getElementById().text

But it gave me an error of:

[ts] Property 'text' does not exist on type 'HTMLElement'. [2339]

EDIT

I tried:

@ViewChild('familyRelation') familyRelation;

And:

<mat-select #familyRelation (selectionChange)="onChange(element, i)" id="family_relation" formControlName="fr" placeholder="Family Relation">                 
                      <mat-option *ngFor="let familyRelation of familyRelationArray;" [value]="familyRelation.family_relation_id">
                    {{familyRelation.family_relation_type}}
                  </mat-option>
                </mat-select>

And after consoling:

enter image description here

enter image description here

Upvotes: 3

Views: 8883

Answers (2)

Florian
Florian

Reputation: 1481

Based on your comments, you want a generic way to access to your html element. Angular provides an easy way to do so

<mat-select #selectFamilyRelation
            (selectionChange)="onChange()" 
            id="family_relation" 
            formControlName="fr" 
            placeholder="Family Relation">                 
  <mat-option *ngFor="let familyRelation of familyRelationArray;" 
              [value]="familyRelation.family_relation_id">
    {{familyRelation.family_relation_type}}
  </mat-option>
</mat-select>

Inside your component :

create a class attribute : @ViewChild('selectFamilyRelation') familyRelation;

then to get the text of your selected option :

onChange() {
  const selectedOptionText = this.familyRelation._elementRef.nativeElement.innerText;
  // ...
}

Upvotes: 0

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41397

First, get the value from form control. Then get the item related to value by looping through array. Finally get the text from the item 

onChange(data, i)
  {
    let text = formGroup.get("fr").value;
    let newFr =this.familyRelationArray.find((item) => item.family_relation_id === text)
    if(newFr){
        console.log('text: '+newFr.family_relation_type); 
    }
  }

Upvotes: 4

Related Questions