角4選擇選項標籤不綁定到模型，因爲Materialise CSS

Question

我有一個Angular 4應用程序，我正在製作註冊表單。 用戶必須從列表中選擇一個工作職位，並使用select en選項標籤。 我將值鏈接到我的模型，但是Job Title是唯一不工作的，當我使用console.log（）模型時，沒有屬性jobTitle。

什麼問題在我的HTML或TS？

HTML：

<form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate> 
     <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !firstName.valid }"> 
      <label>First Name</label> 
      <input type="text" class="form-control validate" name="firstName" [(ngModel)]="model.firstName" 
       #firstName="ngModel" 
       required/> 
      <div *ngIf="f.submitted && !firstName.valid" class="help-block red-text">First Name is required</div> 
     </div> 
     <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !lastName.valid }"> 
      <label>Last Name</label> 
      <input type="text" class="form-control validate" name="lastName" [(ngModel)]="model.lastName" 
       #lastName="ngModel" 
       required/> 
      <div *ngIf="f.submitted && !lastName.valid" class="help-block red-text">Last Name is required</div> 
     </div> 
     <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }"> 
      <label>Username</label> 
      <input type="text" class="form-control validate" name="username" [(ngModel)]="model.username" 
       #username="ngModel" 
       required/> 
      <div *ngIf="f.submitted && !username.valid" class="help-block red-text">Username is required</div> 
     </div> 
     <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !email.valid }"> 
      <label>Email</label> 
      <input type="email" class="form-control validate" name="email" [(ngModel)]="model.email" #email="ngModel" 
       required/> 
      <div *ngIf="f.submitted && !email.valid" class="help-block red-text">Correct email is required</div> 
     </div> 
     <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !tel.valid }"> 
      <label>Telephone</label> 
      <input type="tel" class="form-control validate" name="tel" [(ngModel)]="model.tel" #tel="ngModel" 
       required/> 
      <div *ngIf="f.submitted && !tel.valid" class="help-block red-text">Correct Telephonenumber is required</div> 
     </div> 

     <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !company.valid }"> 
      <label>Company</label> 
      <input type="text" class="form-control validate" name="company" [(ngModel)]="model.company" #company="ngModel" 
       required/> 
      <div *ngIf="f.submitted && !company.valid" class="help-block red-text">Company is required</div> 
     </div> 





     <div class="form-group"> 
      <label>Job Title</label> 
      <select name="jobTitle" [(ngModel)]="model.jobTitle" #jobTitle="ngModel"> 
      <optgroup label="Business"> 
       <option [ngValue]="'Administrative'">Administrative</option> 
       <option [ngValue]="'Banking'">Banking</option> 
       <option [ngValue]="'Consulting'">Consulting</option> 
       <option [ngValue]="'Corporate'">Corporate</option> 
       <option [ngValue]="'Human Resources'">Human Resources</option> 
       <option [ngValue]="'Insurance'">Insurance</option> 
       <option [ngValue]="'Legal'">Legal</option> 
       <option [ngValue]="'Public Relations'">Public Relations</option> 
       <option [ngValue]="'Purchasing'">Purchasing</option> 
       <option [ngValue]="'Sales'">Sales</option> 
      </optgroup> 
      <optgroup label="Creative Industry"> 
       <option [ngValue]="'Event Planning'">Event Planning</option> 
       <option [ngValue]="'Fashion'">Fashion</option> 
       <option [ngValue]="'Marketing'">Marketing</option> 
       <option [ngValue]="'Social Media'">Social Media</option> 
      </optgroup> 
      <optgroup label="Service Industry"> 
       <option [ngValue]="'Customer Service'">Customer Service</option> 
       <option [ngValue]="'Hospitality'">Hospitality</option> 
       <option [ngValue]="'Real Estate'">Real Estate</option> 
       <option [ngValue]="'Restaurant'">Restaurant</option> 
       <option [ngValue]="'Retail'">Retail</option> 
       <option [ngValue]="'Travel'">Travel</option> 
      </optgroup> 
      <optgroup label="Skilled,Trade"> 
       <option [ngValue]="'Construction'">Construction</option> 
       <option [ngValue]="'Maintenance'">Maintenance</option> 
       <option [ngValue]="'Manufacturing'">Manufacturing</option> 
       <option [ngValue]="'Transportation'">Transportation</option> 
      </optgroup> 
      <optgroup label="Technical"> 
       <option [ngValue]="'Engineering'">Engineering</option> 
       <option [ngValue]="'Environmental'">Environmental</option> 
       <option [ngValue]="'Healthcare'">Healthcare/Medical</option> 
       <option [ngValue]="'Information Technology'">Information Technology (IT)</option> 
       <option [ngValue]="'Science'">Science</option> 
      </optgroup> 
      <optgroup label="Others"> 
       <option [ngValue]="'Animal'">Animal</option> 
       <option [ngValue]="'Fundraiser'">Fundraiser</option> 
       <option [ngValue]="'Non-Profit'">Non-Profit</option> 
       <option [ngValue]="'School'">School</option> 
       <option [ngValue]="'Sports'">Sports</option> 
       <option [ngValue]="'Entry Level Job'">Entry Level Job</option> 
       <option [ngValue]="'Not defined'" selected>Not defined</option> 
      </optgroup> 
      </select> 
     </div> 






     <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }"> 
      <label for="pass">Password</label> 
      <input type="password" id="pass" class="form-control validate" name="password" [(ngModel)]="model.password" 
       #password="ngModel" 
       required/> 
      <div *ngIf="f.submitted && !password.valid" class="help-block red-text">Password is required</div> 
     </div> 
     <div class="form-group"> 
      <div class="button-set"> 
      <button [disabled]="loading" class="btn btn-primary">Register</button> 
      <a [routerLink]="['/login']" class="btn btn-secondary">Log in</a> 
      </div> 
     </div> 
     </form> 

TS

import { Component} from '@angular/core'; 

import { AlertService} from '../../_services/index'; 
declare let $ : any; 

@Component({ 
    moduleId: module.id, 
    templateUrl: 'register.component.html', 
    styleUrls: ['../../app.component.css'] 
}) 

export class RegisterComponent { 
    private loading:boolean = false; 
    public model:any = {}; 
    constructor(private alertService:AlertService) { 
    } 

    public register() { 
    this.loading = true; 
    this.alertService.success('Registration successful', true); 
    console.log(JSON.stringify(this.model)); 
    } 
} 

當前的解決方案 當我把我的選擇標籤比它的工作原理browser.default不要使用CSS的物化，是解決我的問題， 。

初始化Materialise的CSS選擇和選項我在我的TS以下文件

ngOnInit() { 
    $(function(){ 
     $('select').material_select(); 
    }); // end of document ready 

    this.model.jobTitle = 'Not Defined'; 
    } 

Answer 1

它的工作對我來說

<div class="input-field col s12"> 
    <select formControlName="status" [(ngModel)]="selectedStatus" materialize="material_select"> 
     <option [ngValue]="" disabled>Select</option> 
     <option [ngValue]="1">Enable</option> 
     <option [ngValue]="0">Disable</option> 
    </select> 
    <label>Status</label> 
</div>