Setting ngModel to angular 2 by default

Question

You have a problem with ngModel in angular 2. Define a task to output multiple inputs from an array in a component class. Found the ability to make ngModel to determine the value from the [name] attribute without using ngModel in [()]. And I am wondering if there is a way to provide a default value for 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 is 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 using ngFor, without success.

Answer 1

The direct way would be to use ngModel with one-way binding

 <input md-input [placeholder]="input.placeholder" [type]="input.type" [name]="input.name" [disabled]="input.isDisabled" [required]="input.isRequired" [ngModel]="input.value"> 

It will transfer the initial value to the input, not responding to events and transferring the changes back to the model.

Answer 2

It should be as simple as binding to the value attribute:

 [value]="input.intitialValue" 

or if this does not work:

 [ngValue]="input.intitialValue" 

Answer 3

resolved the problem by adding ngModel = "{{input.defaultValue}}"