3

Buenas, tengo un componente padre con un listado, al seleccionar se le pasa el elemento seleccionado al componente hijo (un formulario) definido con el decorador @input.

El problema Cuando modifico alguna propiedad en el formulario me replica el cambio en el listado

Que espero Que se replique el cambio una presionado submit

El codigo

padre.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">

Componente hijo

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>
3
  • Has tenido lugar de probar lo que te comento mas abajo? lo probe localmente y funciona. Saludos el 3 mar. 2017 a las 13:14
  • la duda que me surge es que en el caso de una edicion tendria que setearle a projectAttachedToForm los datos de project. Esto lo tendria que manejar en el evento ngOnchange? Y no podria hacer this.projectAttachedToForm = this.project tendria hacer una especia de new Project("dato","dato","dato"); esto para no tener llegar al mismo problema de hoy que me quede bindiado al mismo objeto el 3 mar. 2017 a las 19:56
  • Te añado eso a la respuesta :) el 3 mar. 2017 a las 22:03

1 respuesta 1

2

Create un objeto local en el formulario (projectAttachedToForm), que va a ser del mismo tipo y va a estar bindeado al formulario, pero sigues pasando el input al formulario.

Cuando pulses submit y todo este ok, haces lo siguiente:

this.project = this.projectAttachedToForm

Y debe de funcionarte perfectamente.

Como mejora, te recomendaría crear un evento output controlado en el padre, y dejar el component form solo para presentación y el padre, como smart, y así cuando guardes datos o edites y guardes en la BD, lo haces desde el Smart component siempre.

http://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/

EDITO

Para la edición del objeto en el formulario, tendrías que settear los objetos, pero no pasando la referencia como indico más arriba, para esto, tendrías que clonar el objeto sin pasar la referencia del mismo. Algo como esto:

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

También puedes probar con JSON.stringify y JSON.parse.

1
  • Gracias Alejandro, la duda que me surge es que en el caso de una edicion tendria que setearle a projectAttachedToForm los datos de project. Esto lo tendria que manejar en el evento ngOnchange? Y no podria hacer this.projectAttachedToForm = this.project tendria hacer una especia de new Project("dato","dato","dato"); esto para no tener llegar al mismo problema de hoy que me quede bindiado al mismo objeto el 3 mar. 2017 a las 19:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.