Have a problem with ngModel in angular 2. Have a task to output a couple of inputs from an array in component class. Discovered a possibility to make ngModel take its value from [name] attribute without embracing ngModel in [()]. And I wonder if there is a way to provide a default value to these inputs.
personal-details.component.ts :
import {
Component,
} from '@angular/core';
import { Input }from './Input'
@Component({
selector: 'personal-details',
styleUrls: ['personal-details.component.sass'],
templateUrl: 'personal-details.component.html'
})
export class PersonalDetailsComponent {
title: string;
inputs: Input[] = [
new Input('Name', 'text', 'Name', true, true),
new Input('Surname', 'text', 'Surname', true, true),
new Input('Mobile phone Number', 'text', 'phone', true, true),
new Input('Date of Birth', 'text', 'birthday', false, true),
new Input('Title', 'text', 'title', false, false),
new Input('Title after name', 'text', 'title-after-name', false, false),
new Input('Personal number', 'text', 'personal-number', false, false),
new Input('National ID/Passport number', 'text', 'personal-id', false, true),
];
save = function (form) {
console.log(form);
}
constructor(){
this.title = 'someName';
}
}
Here`s my template:
<h4 class="profile__title">Personal Details</h4>
<form #personalDetails="ngForm" (ngSubmit)="save(personalDetails.value)">
<div layout="row" flex-wrap>
<div class="profile__input-wrapper" *ngFor="let input of inputs" flex="33">
<md-input-container class="profile__input-container">
<input md-input
[placeholder]="input.placeholder"
[type]="input.type"
[name]="input.name"
[disabled]="input.isDisabled"
[required]="input.isRequired"
ngModel>
</md-input-container>
</div>
</div>
<profile-footer ></profile-footer>
</form>
Tried several other approaches to list them with ngFor, no success.
resolved the issue by adding ngModel="{{input.defaultValue}}"