We have a reactive form control:
control:FormControl = new FormControl('steak-0')
And we want to bind it to our mat-select
element such that we can:
- Receive reactive notifications from control.valueChanges
- Have the mat-select default value be steak-0
Approach
Within the app.module.ts
we have imported both FormsModule
and ReactiveFormsModule
.
In the below app.component.ts
component we have created an control:FormControl
instance and initialized the value to steak-0
.
import { Component, VERSION } from "@angular/core";
import { FormControl } from "@angular/forms";
interface Food {
value: string;
viewValue: string;
}
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
control = new FormControl("steak-0");
foods: Food[] = [
{ value: "steak-0", viewValue: "Steak" },
{ value: "pizza-1", viewValue: "Pizza" },
{ value: "tacos-2", viewValue: "Tacos" }
];
constructor() {
this.control.valueChanges.subscribe(s => {
console.log(`The selected value is ${s}`);
});
}
}
In the app.component.html
we have two declarations of mat-select
. The first mat-select
declaration does not bind to control
.
As can be seen the mat-select
uses the <mat-label>Favorite food</mat-label>
as the place holder instruction telling the user to select a food in this case.
In the second case, where we have bound the mat-select
to the form control like this <mat-select [formControl]="control">
, the mat-select
value is initialized to steak-0
.
We subscribe
to the form control within the app.component.ts
constructor.
this.control.valueChanges.subscribe(s => {
console.log(`The selected value is ${s}`);
});
Whenever we change the selection, the subscription logs the selected value.