由于Materialize CSS，Angular 4 select选项标签未绑定到模型

Question

I have an Angular 4 app and I am making a register form. The User has to select a Job Title out of a list, made with select en option tags. I link the values to my model, but Job Title is the only one that is not working, when I console.log() the model, there is no attribute jobTitle.

What is going wrong in my html or 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));
  }
}

CURRENT SOLUTION Do not use materialize css, that solves my problem, when I set my select tag to browser.default than it works.

to initialize Materialize CSS select and options I do the following in my TS file

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

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

Answer 1

Its working for me

<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>