как я могу преобразовать свою работу в материал угловой / матовый - PullRequest
Новая
       2

как я могу преобразовать свою работу в материал угловой / матовый

1 голос
/ 16 октября 2019 
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 ('Province') document.write ('City') document.write ('Barangay')

функция dynamicdropdownProvince (listindex) {switch (listindex) {case "metromanila": document.getElementById ('Provincestatus'). options [0] = new Option (" Province "," ");document.getElementById ("провинция"). options [1] = новая опция ("Метро Манила", "Метроманила");document.getElementById ( "provincestatus") отключен = ложь. break;
case "mindanao": document.getElementById ("Provincestatus"). options [0] = new Option ("Province", "");document.getElementById ("провинция"). options [1] = новая опция ("Agusan Del Norte", "agusandelnorte");document.getElementById ( "provincestatus") отключен = ложь. сломать;} вернуть истину;} function dynamicdropdownCity (listindex) {switch (listindex) {case "agusandelnorte": document.getElementById ("citystatus"). options [0] = new Option ("City", "");document.getElementById ("citystatus"). options [1] = новая опция ("Buenavista", "buenavista");document.getElementById ( "citystatus") отключен = ложь. сломать;case "metromanila": document.getElementById ("citystatus"). options [0] = new Option ("City", "");document.getElementById ("citystatus"). options [1] = new Option ("Binondo", "binondo");document.getElementById ( "citystatus") отключен = ложь. сломать;} вернуть истину;} function dynamicdropdownBarangay (listindex) {switch (listindex) {case "buenavista": document.getElementById ("barangaystatus"). options [0] = new Option ("Barangay", "barangaystatus");document.getElementById ("barangaystatus"). options [1] = new Option ("Alubijid", "alubijid");document.getElementById ( "barangaystatus") отключен = ложь. сломать;case "binondo": document.getElementById ("barangaystatus"). options [0] = new Option ("Barangay", "barangaystatus");document.getElementById ("barangaystatus"). options [1] = новый параметр ("Barangay 287", "barangay287");document.getElementById ( "barangaystatus") отключен = ложь. сломать;} 

return true;

}

1 Ответ

0 голосов
/ 16 октября 2019

Если вы выполните шаги 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*
}

Модуль. тс 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatSelectModule} from '@angular/material/select';

@NgModule({
  imports: [
    CommonModule, MatSelectModule
  ]
})
export class MyModule { }
...