I'm new in angular material. How can I convert all of this into material angular? I also import material angular to my modules, I tried to use mat-select, I change select into mat-select but it didn't work. can someone help me about this?
<input class="input-field" name="postal" type="text" placeholder="Postal Code" name="postal" required>
<select class="input-field" name="region" id="region" onclick="makeDisable()" onchange="javascript: dynamicdropdownProvince(this.options[this.selectedIndex].value);">
<option disabled selected>Region</option>
<option value="metromanila">Metro Manila</option>
<option value="mindanao">Mindanao</option>
<option value="northluzon">North Luzon</option>
<option value="southluzon">South Luzon</option>
<option value="visayas">Visayas</option>
</select>
document.write（'省'） document.write（'城市'） document.write（'Barangay'）
功能dynamicdropdownProvince（listindex）
{
开关（listindex）
{
案例“大都会”：
document.getElementById（'provincestatus'）。options [0] = new Option（“ Province”，“”）;
document.getElementById（“ provincestatus”）。options [1] = new Option（“ Metro Manila”，“ metromanila”）;
document.getElementById（“ provincestatus”）。disabled = false;
休息；
案例“棉兰老岛”：
document.getElementById（“ provincestatus”）。options [0] = new Option（“ Province”，“”）;
document.getElementById（“ provincestatus”）。options [1] = new Option（“ Agusan Del Norte”，“ agusandelnorte”）;
document.getElementById（“ provincestatus”）。disabled = false;
打破;
}
返回true；
}
函数dynamicdropdownCity（listindex）
{
开关（listindex）
{
案例“ agusandelnorte”：
document.getElementById（“ citystatus”）。options [0] = new Option（“ City”，“”）;
document.getElementById（“ citystatus”）。options [1] = new Option（“ Buenavista”，“ buenavista”）;
document.getElementById（“ citystatus”）。disabled = false;
打破;
案例“大都会”：
document.getElementById（“ citystatus”）。options [0] = new Option（“ City”，“”）;
document.getElementById（“ citystatus”）。options [1] = new Option（“ Binondo”，“ binondo”）;
document.getElementById（“ citystatus”）。disabled = false;
打破;
}
返回true；
}
函数dynamicdropdownBarangay（listindex）
{
开关（listindex）
{
案例“ buenavista”：
document.getElementById（“ barangaystatus”）。options [0] = new Option（“ Barangay”，“ barangaystatus”）;
document.getElementById（“ barangaystatus”）。options [1] = new Option（“ Alubijid”，“ alubijid”）;
document.getElementById（“ barangaystatus”）。disabled = false;
打破;
案例“ binondo”：
document.getElementById（“ barangaystatus”）。options [0] = new Option（“ Barangay”，“ barangaystatus”）;
document.getElementById（“ barangaystatus”）。options [1] = new Option（“ Barangay 287”，“ barangay287”）;
document.getElementById（“ barangaystatus”）。disabled = false;
打破;
}
return true;
}
答案 0 :(得分：0)
如果您按照https://material.angular.io/components/select/overview的步骤进行操作
HTML：
<mat-form-field>
<mat-label>Select an option</mat-label>
<mat-select [(value)]="selectedValue">
<mat-option>None</mat-option>
<mat-option value="metromanila">Metro Manila</mat-option>
<mat-option value="mindanao">Mindanao</mat-option>
<mat-option value="northluzon">North Luzon</mat-option>
<mat-option value="southluzon">South Luzon</mat-option>
<mat-option value="visayas">Visayas</mat-option>
</mat-select>
</mat-form-field>
Component.ts：
import {Component} from '@angular/core';
@Component({
selector: 'select-value-binding-example',
templateUrl: 'select-value-binding-example.html',
styleUrls: ['select-value-binding-example.css'],
})
export class SelectValueBindingExample {
selectedValue: string; <-- *will be null if nothing selected or will hold a string*
}
Module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatSelectModule} from '@angular/material/select';
@NgModule({
imports: [
CommonModule, MatSelectModule
]
})
export class MyModule { }