Angular

Question

我正在处理一个表单，提交后我需要能够编辑表单条目。正如您将在代码中看到的那样，该表单运行良好，每个条目都显示为表单下方的一行。但是，我无法修改每个表单条目。如果我拆分任务，就是将数据发送到表单，在那里编辑，然后再次提交。

我想我必须使用补丁值，但我无法让它工作。任何的想法？这是我的第一个 Angular 项目，我有点迷茫。

感谢您的帮助！

这是html

<div class="formulario" >
<h1>Formulario</h1>

<form [formGroup]="person" (ngSubmit)="onsubmit()">
 
  <mat-form-field appearance="fill">
    <label>Introduce tu nombre</label>
    <input matInput #input id="nombre" type="text" placeholder="Nombre (min 3 car)" formControlName="nombre">      
  </mat-form-field>

  <br/>
  <mat-form-field appearance="fill">
    <label>Introduce tus apellidos</label>
    <input matInput #input id="apellidos" type="text" placeholder="Apellidos (min 3 car)" formControlName="apellidos"/>
  </mat-form-field>
  <br/>
<button type = "submit" > Enviar tus datos</button>

    </form>
  </div>



<table>
    <thead>
        <th>Posición</th>
        <th>Nombre</th>
        <th>Apellidos</th>
        <th> Modificar</th>
    </thead>
    <tbody>
        <tr *ngFor="let persona of personas; let i = index">
            <td>{{i}}</td>
            <td>{{persona.nombre}}</td>
            <td>{{persona.apellidos}}</td>
            <td> <button mat-flat-button (click)="edititem(i)" >Modificar</button></td>
      <td>
        </tr>
    </tbody>
</table>

这是我的 ts :

    import { Component, OnInit, ViewChild } from '@angular/core';
import { Persona } from 'src/app/components/formulario/persona';
import { FormControl, FormBuilder, FormGroup, Validators, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
import {MatListModule} from '@angular/material/list';
import { SelectionModel } from '@angular/cdk/collections';


@Component({
  selector: 'app-formulario',
  templateUrl: './formulario.component.html',
  styleUrls: ['./formulario.component.css']
})

export class FormularioComponent implements OnInit {
    person: FormGroup = new FormGroup({});
    personas : Persona[] = [];

    constructor(){
        this.person = new FormGroup({
            nombre : new FormControl("", [Validators.required, Validators.minLength(3)]),
            apellidos : new FormControl("", [Validators.required,  Validators.minLength(3)]),
        });
    }

    ngOnInit() : void{
        }

    onsubmit() {
        let persona = new Persona();

        persona.nombre = this.person.value.nombre;
        persona.apellidos = this.person.value.apellidos;

        this.personas.push(persona);
        this.person.reset();
    }

    edititem(i : number) : void {
            this.person.patchValue({i})
            this.person.get('nombre')?.setValue(this.person.value.nombre)
            this.person.get('apellidos')?.setValue(this.personas[i])

    }

Answer 1

您可以将“整个”角色的索引传递给您的 edititem 函数

<button mat-flat-button (click)="edititem(i,persona )" >

然后使用变量“indexEdited”-最后等于-1，并像

这样更改函数更新

indexEdited:number=-1;
edititem(i:number,persona:Persona) : void {
     this.person.patchValue(persona)
     this.indexEdited=i;  //<--store the index selected
}

现在在提交中检查 indexEdited 是否等于 -1 以不添加其他更改数组

onsubmit() {
    let persona = new Persona();

    persona.nombre = this.person.value.nombre;
    persona.apellidos = this.person.value.apellidos;

    //check if you're "editing" or not
    if (this.indexEdited==-1)
       this.personas.push(persona);
    else
       this.personas[this.indexEdited]=persona;

    this.indexEdited=-1;  //<--you say that you're not editing
    this.person.reset();
}

注意：如果您的 class“Persona”只有属性，请使用界面而不是 class。想象一些像

export interface Persona{
   nombre:string;
   apellidos:string;
}

你可以在 onSubmit 中使用一些像

const persona:Persona={nombre:this.person.value.nombre,
                      apellidos:this.person.value.nombre
                     }

Angular - 不能使用补丁值进行表单编辑

Angular - cannot use patchvalue for form editing

typescript