Mixing
Values not passed correctly from parent to child
Clash Royale CLAN TAG#URR8PPP Values not passed correctly from parent to child
I am new to Angular2 and for practice purposes I have created a set of 3 input components with a Reset button that erases the values entered. I wanted to test the @Input decorator and how values are passed from parent to children. The issue in my code is that the button erases the values only once
Here is the code, the parent component:
import Component from '@angular/core';
@Component(
selector: 'app-root',
template: `
<button (click)="reset()">Reset Age</button>
<app-form-user [age]="age" [name]="name" [surname]="surname">
</app-form-user>`,
styleUrls: ['./app.component.css']
)
export class AppComponent
name;
surname;
age;
reset()
this.name = '';
this.surname = '';
this.age = 18;
and the app-form-user component:
import Component, Input, OnInit from '@angular/core';
@Component(
selector: 'app-form-user',
template: `
<form>
<div>
<label>Name: </label>
<input type="text" value=name/>
</div>
<div>
<label>Surname: </label>
<input type="text" value=surname/>
</div>
<div>
<label>Age: </label>
<input type="number" value=age min="18" max="100"/>
</div>
</form>`,
styleUrls: ['./form-user.component.css']
)
export class FormUserComponent implements OnInit
constructor()
@Input() age;
@Input() name;
@Input() surname;
ngOnInit()
this.age = 18;
2 Answers
2
Angular provide directive to bind some variable to input elements. I don't know why your reset button only works one time, but you should look at the [(ngModel)] directive from the FormsModule.
[(ngModel)]
FormsModule
See Two-way data binding with ngModel
<form>
<div>
<label>Name: </label>
<input type="text" [(ngModel)]="name"/>
</div>
<div>
<label>Surname: </label>
<input type="text" [(ngModel)]="surname"/>
</div>
<div>
<label>Age: </label>
<input type="number" [(ngModel)]="age" min="18" max="100"/>
</div>
</form>
And don't forget to import FormsModule in your component module.
FormsModule
The
@inputs "age", "name" and "surname" seems to be literal, so I don't think there is reference issue. I think the issue came from the way the value are binded to the HTML input element, with simple one way binding– Noémi Salaün
Sep 8 '17 at 15:38
@inputs
I thought about that as well. Maybe you're right. I remember somewhere in the docs it says something like, that theres a difference between properties and attributes and the way its handled by the dom.
– fubbe
Sep 8 '17 at 15:39
You should bind changes in the parent component to the child component:
Parent HTML:
<app-form-user [(name)]="name"></app-form-user>
Child HTML:
<input type="text" [ngModel]= "name" (ngModelChange)="onModelChange($event)"/>
Child class:
@Input() name;
@Output() nameChange = new EventEmitter();
constructor()
onModelChange(event)
this.nameChange.emit(event);
Working Demo
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Maybe the reference to the values provided to the component change on reset() and thats why it only works once?
– fubbe
Sep 8 '17 at 15:33