Ich habe diese Formularkomponente, die als Eingabe ein User
Objekt nimmt. Ich möchte dieses Objekt für die Zwei-Wege-Datenbindung verwenden, aber es funktioniert nicht. Irgendwelche Ideen wo ist das Problem?Zwei-Wege-Datenbindung in Form funktioniert nicht Angular 2
PS: Das Problem scheint von dem Kopieren des Eingabeparameters zu kommen. Wenn ich das Original übergebe, funktioniert es gut, aber wenn ich eine Kopie übergebe, funktioniert die Zwei-Wege-Datenbindung nicht. Wie kann ich mit der Kopie arbeiten?
<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;
}
Sie brauchen nicht '# firstName', wenn Sie bereits mit' [(ngModel)] ' – zurfyx
@zurfyx Dies ist das Problem nicht lösen :( – user3719857
versuchen Sie es einmal' selectedUser mit? .firstName', auch von wo die Daten kommen in 'selectedUser'? –