web-dev-qa-db-fra.com

Définition de la valeur par défaut de ngModel angular 2

Avoir un problème avec ngModel dans angular 2. Avoir une tâche pour sortir quelques entrées à partir d'un tableau dans la classe de composants. Découvert une possibilité de faire ngModel prendre sa valeur de l'attribut [name] sans embrasser ngModel in [()]. Et je me demande s'il existe un moyen de fournir une valeur par défaut à ces entrées.

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

Voici mon modèle:

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

J'ai essayé plusieurs autres approches pour les répertorier avec ngFor, sans succès.

javascriptangularangular2-formsangular2-ngmodelngmodel
11
Mike Kovetsky

La manière simple serait d'utiliser ngModel avec une liaison unidirectionnelle

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

Il transmettrait la valeur initiale à l'entrée sans réagir aux événements et transmettre les modifications au modèle.

5
admax

résolu le problème en ajoutant ngModel = "{{input.defaultValue}}"

4
Mike Kovetsky

Cela devrait être aussi simple que de lier l'attribut value:

[value]="input.intitialValue"

ou si cela ne fonctionne pas:

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