web-dev-qa-db-ja.com

ngModelのデフォルト値の設定angular 2

angular 2.のngModelに問題があります。コンポーネントクラスの配列からいくつかの入力を出力するタスクがあります。 ngModel in [（）]。そして、これらの入力にデフォルト値を提供する方法があるのだろうか。

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

ここに私のテンプレートがあります：

<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>

NgForでそれらをリストするために他のいくつかのアプローチを試みましたが、成功しませんでした。

javascriptangularangular2-formsangular2-ngmodelngmodel
11
Mike Kovetsky

簡単な方法は、一方向バインディングでngModelを使用することです

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

イベントに反応し、変更をモデルに戻すことなく、初期値を入力に渡します。

5
admax

ngModel = "{{input.defaultValue}}"を追加して問題を解決しました

4
Mike Kovetsky

値属性にバインドするのと同じくらい簡単です：

[value]="input.intitialValue"

またはそれが機能しない場合：

[ngValue]="input.intitialValue"
3
Ben Richards