使用角度保存動態輸入

Question

我想知道如何添加我在表單值中創建的數組以將其發送到 laravel 並將其存儲在我的數據庫中以創建我正在動態執行的輸入，並在復選框中我從組件並將它們打印在 html 中

在我的組件中，我創建了輸入和 3 個復選框

    public steps: any[] = [{
        id: 1,
        paso: '',
        accion: '',
        punto_critico: '',
        razon: '',
        fichero: ''
      }];
      
      turnsArray: Array<any> = [];
      turns = [
        { name: '1 Turno', id:'1' },
        { name: '2 Turno', id:'2' },
        { name: '3 Turno', id:'3' }
      ];
Addsteps() {
    this.steps.push({
      id: this.steps.length + 1,
      paso: '',
      accion: '',
      punto_critico: '',
      razon: '',
      fichero: ''
    });
  }

  removeStep(i:number){
    this.steps.splice(i,1);
  }
    
  onChange(turn:string, isChecked:boolean) {
    if(isChecked) {
      this.turnsArray.push(turn);
    } else {
      let index = this.turnsArray.indexOf(turn);
      this.turnsArray.splice(index,1);
    }
  }

在我的 HTML 中是這樣的

<div class="card-body">
    <section class="container mb-4 p-3" name="steps" *ngFor="let step of steps; let i = index;" style="vertical-align: middle;">
        <div class="col-6">
            <h4>Paso {{i + 1}}</h4>
        </div>
        <div class="col-6">
            <div class="form-group">
                <label>Paso</label>
                <input type="text" class="form-control" [(ngModel)]="step.paso" name="paso_{{step.id}}" placeholder="Paso"/>
            </div>
        </div>
        
        <div class="col-6">
            <div class="form-group">
                <label>Accion</label>
                <input type="text" class="form-control" [(ngModel)]="step.accion" name="accion_{{step.id}}" placeholder="Accion"/>
            </div>
        </div>
        
        <div class="col-6">
            <div class="form-group">
                <label>Punto critico</label>
                <input type="text" class="form-control" [(ngModel)]="step.punto_critico" name="punto_critico_{{step.id}}" placeholder="Punto critico"/>
            </div>
        </div>
        
        <div class="col-6">
            <div class="form-group">
                <label>Razon</label>
                <input type="text" class="form-control" [(ngModel)]="step.razon" name="razon_{{step.id}}" placeholder="Razon"/>
            </div>
        </div>
        
        <div class="col-6">
            <div class="form-group">
                <label>Fichero</label>
                <input type="file" class="form-control" [(ngModel)]="step.fichero" name="fichero_{{step.id}}"/>
            </div>
        </div>
        <button type="button" class="btn btn-danger btn-sm" (click)="removeStep(i)">Remover paso</button>
    </section>
    
    <button type="button" class="btn btn-success" (click)="Addsteps()">Agregar paso</button> 
</div>
<div class="form-group row">
    <label for="turn" class="col-md-3 col-form-label">Turno</label>
    <div class="col-md-9">
        <div class="form-check" *ngFor="let item of turns">
            <input class="form-check-input" name="turn" (change)="onChange(item.name, $event.target.checked)" type="checkbox">
            <label class="form-check-label">
                {{item.name}}
            </label>
        </div>
    </div>
</div>

我需要做什么才能以價值形式存儲我用黃色標記的帽子

當我點擊按鈕提交時，我調用 onSubmit 方法

onSubmit(form){
    console.log(this.project);
    this._projectService.create(this.token, this.project, this.steps, this.turnsArray).subscribe(
      response => {
        console.log(response);
      },
      error => {
        console.log(<any>error);
      }
    );
  }

Answer 1

我相信實現這一目標的最簡單解決方案是使用ReactiveForms 。 使用FormArray表單，創建FormArray會更容易，並且可以使用formGroup value屬性輕松訪問表單的value

讓我們首先處理步驟的id屬性。 您正在使用id: this.steps.length + 1,分配id屬性id: this.steps.length + 1,現在考慮以下事件序列

• 插入 3 個項目以產生[{id: 1}, {id: 2}, {id: 3}] 。 為簡單起見，我刪除了其他屬性
• 刪除項目 2。我們現在有[{id: 1}, {id: 3}]
• 插入新項目。 我們現在有[{id: 1}, {id: 3}, {id: 3}]我們現在有 2 個id = 3項目，這可能不是我們想要的

我們將通過創建一個currentStepId和一個getNewId()方法來解決上面的問題

currentStepId = 0;
getNewId() {
  this.currentStepId += 1;
  return this.currentStepId;
}

下一步將是導入ReactiveFormsModule

import { ..., ReactiveFormsModule } from '@angular/forms';

...

@NgModule({
  imports:      [ ..., ReactiveFormsModule ],
})

我將注入FormBuilder以協助創建formGroup

我們將從我們希望表單值如何的計划開始。 我將假設以下結構

{
  steps: [{ id: 1, paso: "", accion: "", punto_critico: "", razon: "", fichero: "" }],
  turns = [];
}

我們可以定義newStep屬性

  get newStep(): FormGroup {
    return this.fb.group({
      id: [this.getNewId()],
      paso: "",
      accion: "",
      punto_critico: "",
      razon: "",
      fichero: ""
    });
  }

並定義我們的formGroup

  constructor (private fb: FormBuilder) {}
  stepsForm = this.fb.group({
    steps: [this.newStep],
    turns: [[]]
  })

現在讓我們定義添加和刪除步驟的函數

get steps(): FormArray {
  return this.stepsForm.get('steps') as FormArray
}
Addsteps() {
  this.steps.push(this.newStep);
}
removeStep(i: number) {
  this.steps.controls.splice(i, 1);
  this.stepsForm.updateValueAndValidity()
}

最后我們需要處理turns

get turns() {
  return this.stepsForm.get('turns')
}
onChange(turn: string, isChecked: boolean) {
    
    if (isChecked) {
      console.log(this.turns.value);
      this.turns.setValue([...this.turns.value, turn]);
    } else {
      this.turns.setValue(this.turns.value.filter(a => a != turn ));
    }
  }

有了上面的內容，您將需要更改您的 html

<div class="card-body" [formGroup]='stepsForm'>
    <fieldset formArrayName='steps'>
        <legend>Steps</legend>
        <fieldset class="container mb-4 p-3" name="steps" *ngFor="let step of steps.controls; let i = index;"
            style="vertical-align: middle;" [formGroupName]='i'>
            <legend>Step {{ i + 1 }}</legend>
            <div class="col-6">
                <h4>Paso {{i + 1}}</h4>
            </div>
            <div class="col-6">
                <div class="form-group">
                    <label>Paso</label>
                    <input type="text" class="form-control" formControlName="paso" placeholder="Paso"/>
            </div>
                </div>

                <div class="col-6">
                    <div class="form-group">
                        <label>Accion</label>
                        <input type="text" class="form-control" formControlName="accion"  placeholder="Accion"/>
            </div>
                    </div>

                    <div class="col-6">
                        <div class="form-group">
                            <label>Punto critico</label>
                            <input type="text" class="form-control" formControlName="punto_critico" placeholder="Punto critico"/>
            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label>Razon</label>
                                <input type="text" class="form-control" formControlName="razon" placeholder="Razon"/>
            </div>
                            </div>

                            <div class="col-6">
                                <div class="form-group">
                                    <label>Fichero</label>
                                    <input type="file" class="form-control" formControlName="fichero" />
            </div>
                                </div>
                                <button type="button" class="btn btn-danger btn-sm" (click)="removeStep(i)">Remover paso</button>
        </fieldset>
    </fieldset>

    <button type="button" class="btn btn-success" (click)="Addsteps()">Agregar paso</button>
  <div class="form-group row">
    <label for="turn" class="col-md-3 col-form-label">Turno</label>
    <div class="col-md-9">
        <div class="form-check" *ngFor="let item of turnsList">
            <input class="form-check-input" name="turn" (change)="onChange(item.name, $event.target['checked'])" type="checkbox">
            <label class="form-check-label">
                {{item.name}}
            </label>
        </div>
    </div>
</div>
</div>

請看這個演示