Angular2 @Input does not reflect changes to the parent component

Question

Angular2 @Input does not reflect changes to the parent component

Navigation

#1 by (2 votes)

3

Good, I have a parent component with a list, when selecting the selected element is passed to the child component (a form) defined with the decorator @ input .

The problem When I modify some property in the form, it replicates the change in the list

I hope That the change is replicated by a pressed submit

The code

father.html

<div class="container">
    <h2>Project List</h2>
    <button (click)="expandForm(true)" class="btn btn-default">New</button>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                        <th>State</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let project of projects" (click)="onSelect(project)">
                        <td>{{project.name}}</td>
                        <td>{{project.description}}</td>
                        <td>{{project.state.description}}</td>
                    </tr>
                </tbody>
            </table>
    <!--</div>-->
</div>
<project-form  [project]="selectedProject">

Child component

export class FormComponent implements OnInit {
    @Input()
    project: Project;

    constructor(private service: PService) { }

    ngOnInit() {
    }
}

hijo.html

<form (ngSubmit)="onSubmit()" #projectForm="ngForm" *ngIf="_project != null">
    <div class="form-group">
        <label for="txtName">Name</label>
        <input [(ngModel)]="project.name" type="text" class="form-control" id="txtName" name="Name"/>
    </div>
    <div class="form-group">
        <label for="txtDescription">Description</label>
        <input [(ngModel)]="_project.description" type="text" class="form-control" id="txtDescription" name="Description"/>
    </div>
    <div class="form-group">
        <label for="ddlState">State</label>
        <select  [(ngModel)]="project.state" class="form-control" id="ddlState" name="State">
            <option *ngFor="let s of projectStates" [ngValue]="s">{{s.description}}</option>
        </select>
    </div>
    <button type="submit" class="btn btn-success">Submit</button>
    <button type="reset" (click)="clear()" class="btn btn-default">Cancel</button>
</form>

angularjs-2.0 binding

asked by locuraskyline 02.03.2017 в 02:21

source

1 answer

Find adjacent cells in a matrix Cmbiar og: image with Javascript

score 2 · Accepted Answer

Create a local object in the form (projectAttachedToForm), which is going to be of the same type and will be binded to the form, but you still pass the input to the form.

When you press submit and everything is ok, you do the following:

this.project = this.projectAttachedToForm

And it must work perfectly.

As an improvement, I would recommend creating a controlled output event in the parent, and leave the component form only for presentation and the parent, as smart, and so when you save data or edit and save in the DB, you do it from the Smart component always.

link

EDITO

For the edition of the object in the form, you would have to set the objects, but not passing the reference as I indicated above, for this, you would have to clone the object without passing the reference of it. Something like this:

var objeto1 = { name: "Mi nombre" };
var objeto2 = Object.assign({},objeto1);

You can also try JSON.stringify and JSON.parse.