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';
}
