Hice un formulario de creación que publica datos en la base de datos. Ahora necesito hacer un formulario de actualización. ¿Necesito crear un componente separado para el formulario de actualización? ¿O debería usar el mismo componente para actualizar y crear formulario?
aquí está mi código de plantilla,
template: ` <form novalidate (ngSubmit)="this.createExperience()" [formGroup]="this.formGroup"> <div formArrayName="dayanddescriptions"> <div class="panel panel-default" *ngFor="let dayAndDescription of this.formGroup.controls.dayanddescriptions.controls; let i = index" > <div class="panel-heading"> <span>Day {{i + 1}}</span> <span class="glyphicon glyphicon-remove pull-right" *ngIf="i>0" (click)="removeDayandDescription(i)"> </span> </div> <div class="panel-body" [formGroupName]="i"> <!--Day--> <div class="form-group col-xs-4" > <label for="text">Day</label> <input type="text" class="form-control" formControlName="day" [ngModel]="i + 1" readonly> </div> <!--Description--> <div class="form-group col-xs-4"> <label>Description</label> <input type="text" class="form-control" formControlName="description"> </div> </div> </div> </div> </form> <div class="margin-20"> <a (click)="addDayandDescription()" style="cursor: default"> Add another day + </a> </div> <pre> form: {{ this.formGroup.value | json }} </pre> `, here is the component, ngOnInit() { this.createForm(); } public buildForm(buildFormObject) { this.formGroup = buildFormObject; } initDayandDescription() { return this._formBuilder.group({ day: ['', Validators.required], description: [''], }); } addDayandDescription() { const control: FormArray = this.formGroup.get('dayanddescriptions') as FormArray; control.push(this.initDayandDescription()); } createForm() { this.buildForm(this._formBuilder.group({ dayanddescriptions: this._formBuilder.array([ this.initDayandDescription(), ]), hashtags: '', })); }puede crear un componente de formulario común, que acepte que @Input es un FormGroup, luego cree el formulario Editar y Crear, configure el formulario (el formulario de edición tendrá valores), pasando su formulario al componente de formulario común:
Común
@Component({ selector: 'tpc-cm-form', template: ` <div [formGroup]="formGroup"> <input formControlName="example" type="text"> <br> <textarea formControlName="sectionContent"></textarea> </div> ` }) export class CMForm { @Input() formGroup: FormGroup; }Crear
@Component({ selector: 'tpc-cr-form', template: ` <form [formGroup]="form"> <tpc-cm-form [formGroup]="form"></tpc-cm-form> </form> ` }) export class CreateForm { form: FormGroup; constructor(private fb: FormBuilder) { } ngOnInit() { this.form = this.fb.group({ example: '', sectionContent: '' }); } }Editar
@Component({ selector: 'tpc-ed-form', template: ` <form [formGroup]="form"> <tpc-cm-form [formGroup]="form"></tpc-cm-form> </form> ` }) export class EditForm { form: FormGroup; constructor(private fb: FormBuilder) { } ngOnInit() { this.form = this.fb.group({ example: '', sectionContent: '' }); // fetch data from API for example this.form.patchValue({ example: 'Simple data', sectionContent: 'Content textarea' }); } }demostración en línea: https://plnkr.co/edit/NWgzGdUc9cDkKujPgrl4?p=preview
puede crear un componente de formulario común para ambos. Si la ruta del enrutador del formulario es, digamos
/createform (sin parámetro) luego abra el formulario para el modo de creación. También para el caso de edición, abriremos ese componente con un parámetro de enrutador ( por ejemplo, /createform/edit ) y con la ayuda del parámetro de enrutador puede actualizar el formulario en modo de edición.
para obtener el parámetro del enrutador
this.route.paramMap.subscribe(params => { console.log(params.get('paramName')); });he creado un stackblitz para ti