Setting ngModel default value angular 2

Question

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.

Solution 1

The straightforward way would be using 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 would pass the initial value to the input without reacting to events and passing changes back to the model.

Solution 2

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

Solution 3

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

[value]="input.intitialValue"

or if that doesn't work:

[ngValue]="input.intitialValue"

Comments

[Mike Kovetsky]

Thanks for the answer! [ngValue] returns a syntax error. [value] seems to be valid, but shows no result in the actual view. Although ng-reflect-value="1" has appered in DOM.

[Ben Richards]

Oh, duh! I overlooked that you were doing one-way binding to ngModel, (when you do ngModel) by itself. So you changed it to two-way data binding and that works. Sill miss on my part.