I would like to get value and not the viewValue from a Reactive Form control. I am only able to get the viewValue. I will explain what I mean by this below.
I have looked into SO articles like How to get values of reactive form inputs in Angular? but that talks about the value that is in the view, not the value itself. I have tried adding .viewValue to the end but when building I get an error "Property 'viewValue' does not exist on type 'AbstractControl"
HTML:
<mat-form-field>
<mat-select placeholder="Language" formControlName="language2" required>
<mat-option *ngFor="let language of languages2" [value]="language.value">
{{ language.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
TS:
this._profileForm = this.fb.group({
'language2': [this.languages2]
});
this.languages2 = [
{ value: 1, viewValue: this.englishReg },
{ value: 2, viewValue: this.spanishReg }
];
if (this._profileForm.controls["language2"].value == null)
this._profileForm.controls["language2"].setValue(this.languages2.filter(item => item.value === 1)[0].viewValue);
console.log(this._profileForm.get('language2').value);
Actual result: prints "Ingles" Expected Result: However, I want to get the value 1, when the user selects Ingles