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.

score 8 · Accepted Answer · answered Jan 26 '17 at 08:47

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.

score 7 · Answer 2 · answered Jan 26 '17 at 08:42

7

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

answered Jan 26 '17 at 08:42

Mike Kovetsky

1,638
1
14
24

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. – Ben Richards Jan 31 '17 at 16:25

score 3 · Answer 3 · answered Jan 25 '17 at 19:20

3

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

[value]="input.intitialValue"

or if that doesn't work:

[ngValue]="input.intitialValue"

answered Jan 25 '17 at 19:20

Ben Richards

3,437
1
14
18

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. – Mike Kovetsky Jan 26 '17 at 08:02

Setting ngModel default value angular 2

3 Answers3