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>