javascript - angular reactive form - bind another property other than [value] -

i have angular reactive form select box follows:

<select formcontrolname="incomesourceid">     <option value="" disabled >select source</option>     <option *ngfor="let source of primarysourceincome"  [value]="source.value">{{source.viewvalue}}</option> </select> 

i show/hide sections depending on dropdown selection. far have:

<div class="row" [hidden]="applicationform.get('incomesourceid').value !== '1'"></div> <div class="row" [hidden]="applicationform.get('incomesourceid').value !== '2'"></div> 

component:

this.applicationform = this.fb.group({        incomesourceid: ['', [validators.required, validators.minlength(1), validators.maxlength(50)]]     }) 

this works however, logic based on value, id returned server. prefer build logic check against {{source.viewvalue}}, not change. how can bind property form <option>? ngmodel not work within form group.

<select formcontrolname="incomesourceid">     <option value="" disabled >select source</option>     <option *ngfor="let source of primarysourceincome"  [ngvalue]="source.value">{{source.viewvalue}}</option> // change [ngvalue] </select> 

if value not string [ngvalue]="..." must used. [value]="..." supports strings.