Question

我有这个表单组件，它将User对象作为输入。我想将该对象用于双向数据绑定，但它不起作用。任何想法问题在哪里？

PS：问题似乎来自复制输入参数。如果我传递原始它工作正常，但如果我传递副本双向数据绑定不起作用。如何使其与副本一起使用？

<user-form [selectedUser]="copyUser()" (isValidated)="onToggleDialog($event)"></user-form> 


copyUser() :User {
  // when returning the copy it doesn't work, 
  // but when returning this.userToPass it works 
  return JSON.parse(JSON.stringify(this.userToPass));
}

import { Component, EventEmitter } from '@angular/core';

import {
    FormBuilder,
    FormGroup,
    Validators,
    AbstractControl,
    ReactiveFormsModule 
 } from '@angular/forms';

import { User } from '../../domain/user';
import { GlobalMailValidator } from '../../validators/mail/mail.validator';
import { Role } from '../../domain/role';
import { UserService } from '../../services/user.service';

 @Component({
     inputs: ['selectedUser'],
     outputs: ['isValidated'],
     selector: 'user-form',
     templateUrl: 'app/component/user/user.form.html'
 })
 export class UserForm {

     /**
      * The user passed to this component. It should preferably be a copy.
      */
     selectedUser: User;

     /**
      * All the roles in the DB.
      */
     roles: Role[];

     /**
      * All the time zones in the DB.
      */
     timeZones: any[];

     /**
      * Event emitter to output the edited user.
      * Returns null if the operation was canceled.
      */
     isValidated: EventEmitter<User>;

     constructor(private userSerive: UserService) {

        this.isValidated = new EventEmitter();
        // instantiate the roles array only ones on component creation
        this.userSerive.listRoles().then( res => this.roles = res);
        this.userSerive.listTimeZones().then( res => this.timeZones = res);
    }

    assessValidation(success: boolean) :void {
        // the selected user object does not change :(
        console.log(this.selectedUser);
        if(success) {
            //this.isValidated.emit(this.selectedUser);
        } else {
            // if a cancel operation was requested emit null instead
            this.isValidated.emit(null);
        }

    }

 }

<!-- THIS DOES NOT UPDATE !!!! -->
<div>{{selectedUser.firstName}}</div>
<form #controlForm="ngForm">
            <div class="ui-g">
                    <input type="text"
                           placeholder="Login"
                           [(ngModel)]="selectedUser.login"
                           name="login"
                           #login="ngModel"
                    />      
            </div>
            <div class="ui-g">
                <input  type="text" 
                        placeholder="First Name"
                        [(ngModel)] = "selectedUser.firstName"
                        name="firstName"
                        #firstName="ngModel"
                />
            </div>
            <div class="ui-g">
                <input  type="text"
                        placeholder="Last Name"
                        [(ngModel)] = "selectedUser.lastName"
                        name="lastName"
                        #lastName="ngModel"
                />
            </div>            
            <div class="ui-g">
                <input  type="text"
                        placeholder="e-mail"
                        [(ngModel)]="selectedUser.email"
                        name="email"
                        #email="ngModel"
                />
            </div>

            <div class="ui-g">
                    <input type="checkbox" [(ngModel)]="selectedUser.isDeleted" name="isDeleted" #isDeleted="ngModel"/>
            </div>

            <button type="button" [disabled]="!controlForm.form.valid" class="ui button" (click)="assessValidation(true)">Save</button>
            <button type="button" class="ui button" (click)="assessValidation(false)">Cancel</button>
</form>

import { Role } from '../domain/role';

export class User {
  fullName: string;
  password: string;
  isDeleted: boolean = false;

  constructor(public id: number, 
      public login:string,       
      public firstName:string, 
      public lastName:string, 
      public email:string, 
      public locale:string, 
      public timeZone:string,
      public version:number,
      public roles:Role[]) { 
    this.fullName = this.firstName + ' '  + this.lastName;    
  }
}

export class Role {
  id: number;
  name: string;
  refId: string;
}

Answer 1

您必须先初始化用户对象。

selectedUser: User = new User();

表单中的双向数据绑定不适用于Angular 2

1 个答案: