Modifying the value of a form select element programmatically presents an issue.
Even after changing the value in the form, the paragraph element "p" remains hidden.
However, if you manually adjust the form's value, the visibility of the "p" element functions correctly.
Expected Outcome:
The <p> tag should be visible when the `field1` FormControl value equals `1`.
Please advise on what might be causing this problem?
component.html
<form [formGroup]="formGroup">
<mat-form-field class="mb-4" fxFlex="100">
<mat-select #field1 formControlName="field1" placeholder="Data type" required>
<mat-option value="0" selected>Boolean</mat-option>
<mat-option value="1">Int</mat-option>
<mat-option value="2">Double</mat-option>
<mat-option value="3">String</mat-option>
<mat-option value="4">Byte array</mat-option>
<mat-option value="5">Object</mat-option>
</mat-select>
</mat-form-field>
</form>
<p *ngIf="field1.value === '1'">Integer</p>
<button mat-raised-button color="primary" (click)="onClick()">Set 'Int'</button>
component.ts
export interface Item {
value: string;
viewValue: string;
}
@Component({
selector: 'select-overview-example',
templateUrl: 'select-overview-example.html',
styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
public data: Item[] = [
{value: '1', viewValue: 'Option 1'},
{value: '2', viewValue: 'Option 2'},
{value: '3', viewValue: 'Option 3'}
];
public formGroup: FormGroup;
constructor(private _formBuilder: FormBuilder){
}
ngOnInit() {
this.formGroup = this._formBuilder.group({
field1: [1, null]
});
}
onClick(){
this.formGroup.controls.field1.setValue('1');
}
}