Question

我对如何修补我的成分上的多个列和行感到困惑。由于一种成分有几个有效期。他们必须分开。但每种成分都有自己的可用数量。但他们也有一个完整的批准数量。当我在Approved Quantity上输入时，我还需要检查Available Quantity和Quantity To Transfer。以下是我所说的更清晰的图片。

TS

    .......
    .subscribe(
        (data:any) => {
            this.request = data.requestStock[0];
            console.log(data); 
            this.patchValues();

        },
        error => {
            console.log(error); 
        })
}

patchValues() {
    let rows = this.patchForm.get('rows') as FormArray;
    this.request.delivery_items[0].ingredient.warehouse_items.forEach(data => {
        rows.push(this.fb.group({
            ingredient_id: data.ingredient.id,
            ingredient_sku: data.ingredient.SKU,
            ingredient_name: data.ingredient.name,
            approved_quantity: this.request.delivery_items[0].approved_quantity,
            expiration_date: data.expiration_date,
            available_quantity: data.available_stocks,
            transferred_quantity: [null, Validators.required],
            unit: this.request.delivery_items[0].unit.name
        }))
    })
}

HTML

  <tr *ngFor="let row of patchForm.controls.rows.controls; let i = index" [formGroupName]="i">
  <td>{{row.value.ingredient_sku}}</td>
  <td>{{row.value.ingredient_name}}</td>
  <td>{{row.value.approved_quantity }}</td>
  <td>{{row.value.expiration_date }}</td>
  <td>{{row.value.available_quantity }}</td>
  <td>{{ row.value.transferred_quantity }}
    <div class="error" *ngIf="row.hasError('out')">Your Quantity Exceeded The Available Approved Quantity</div>
    <div class="error" *ngIf="row.hasError('out2')">Your Quantity Exceeded The Available Warehouse Quantity</div>
  </td>
  <td>{{row.value.unit}}</td>
  <td>
   <button type="button" class="btn btn-square btn-danger btn-sm waves-effect waves-light" (click)="onDeleteRow(i)"> <i class="icofont icofont-ui-delete"></i> Remove</button>
 </td>
</tr>

JSON

{
      "token": "eyJ0eXAiO",
      "requestStock": [
        {
          "id": 6,
          "requested_by": 1,
          "approved_by": 1,
          "requested_date": "2018-01-28",
          "approved_date": "2018-01-28",
          "outlet_id": 5,
          "request_stock_number": "RS-201800000006",
          "status": "Approved",
          "delivery_status": "Open",
          "created_at": "2018-01-28 14:17:23",
          "updated_at": "2018-01-28 14:17:31",
          "delivery_items": [
            {
              "id": 21,
              "ingredient_id": 1,
              "request_stock_id": 6,
              "request_quantity": 100,
              "approved_quantity": 100,
              "delivered_quantity": 0,
              "delivery_status": "Open",
              "unit": {
                "id": 2,
                "name": "Gram",
                "abbreviation": "g",
                "lowest_unit": "Yes",
                "created_at": null,
                "updated_at": null
              },
              "created_at": null,
              "updated_at": "2018-01-28 14:17:31",
              "ingredient": {
                "id": 1,
                "name": "Cafe Latte Powder",
                "description": "Cafe Latte Powder",
                "SKU": "1000000",
                "purchase_price": 400,
                "vat": 10,
                "asset_account": 3,
                "cogs_account": 14,
                "expense_account": 11,
                "sales_account": 13,
                "default_unit": 2,
                "purchase_unit": 1,
                "created_at": "2018-01-18 08:30:37",
                "updated_at": "2018-01-18 08:30:37",
                "warehouse_items": [
                  {
                    "id": 1,
                    "ingredient_id": 1,
                    "warehouse_id": 1,
                    "receive_order_id": 1,
                    "unit": 2,
                    "expiration_date": "2019-01-26",
                    "total_stocks": 100000,
                    "transfer_stocks": 11033,
                    "available_stocks": 88967,
                    "created_at": null,
                    "updated_at": "2018-01-20 14:48:16"
                  },
                  {
                    "id": 9,
                    "ingredient_id": 1,
                    "warehouse_id": 2,
                    "receive_order_id": 1,
                    "unit": 2,
                    "expiration_date": "2020-06-29",
                    "total_stocks": 1000000,
                    "transfer_stocks": 0,
                    "available_stocks": 1000000,
                    "created_at": null,
                    "updated_at": "2018-01-20 14:48:16"
                  },
                  {
                    "id": 18,
                    "ingredient_id": 1,
                    "warehouse_id": 1,
                    "receive_order_id": 3,
                    "unit": 2,
                    "expiration_date": "2018-01-22",
                    "total_stocks": 9000,
                    "transfer_stocks": 0,
                    "available_stocks": 9000,
                    "created_at": null,
                    "updated_at": null
                  }
                ]
              }
            },
            {
              "id": 22,
              "ingredient_id": 2,
              "request_stock_id": 6,
              "request_quantity": 200,
              "approved_quantity": 100,
              "delivered_quantity": 0,
              "delivery_status": "Open",
              "unit": {
                "id": 5,
                "name": "Liter",
                "abbreviation": "L",
                "lowest_unit": "No",
                "created_at": null,
                "updated_at": null
              },
              "created_at": null,
              "updated_at": "2018-01-28 14:17:31",
              "ingredient": {
                "id": 2,
                "name": "Water",
                "description": "Water",
                "SKU": "1000001",
                "purchase_price": 50,
                "vat": 0,
                "asset_account": 1,
                "cogs_account": 14,
                "expense_account": 13,
                "sales_account": 11,
                "default_unit": 5,
                "purchase_unit": 9,
                "created_at": "2018-01-18 09:29:09",
                "updated_at": "2018-01-18 09:29:09",
                "warehouse_items": [
                  {
                    "id": 2,
                    "ingredient_id": 2,
                    "warehouse_id": 1,
                    "receive_order_id": 1,
                    "unit": 5,
                    "expiration_date": "2019-02-21",
                    "total_stocks": 1000,
                    "transfer_stocks": 200,
                    "available_stocks": 800,
                    "created_at": null,
                    "updated_at": "2018-01-20 11:07:20"
                  },
                  {
                    "id": 10,
                    "ingredient_id": 2,
                    "warehouse_id": 2,
                    "receive_order_id": 1,
                    "unit": 5,
                    "expiration_date": "2020-01-29",
                    "total_stocks": 2000,
                    "transfer_stocks": 0,
                    "available_stocks": 2000,
                    "created_at": null,
                    "updated_at": "2018-01-20 11:07:20"
                  },
                  {
                    "id": 23,
                    "ingredient_id": 2,
                    "warehouse_id": 3,
                    "receive_order_id": 7,
                    "unit": 5,
                    "expiration_date": "2018-01-24",
                    "total_stocks": 2000,
                    "transfer_stocks": 0,
                    "available_stocks": 2000,
                    "created_at": null,
                    "updated_at": null
                  }
                ]
              }
            }
          ]
        }
      ]
    }

Answer 1

FormControl有一个方法

Formcontrol.setValue(jsonRepresentationOfForm)

所以你可以打电话给

transferForm.get('rows3').setValue(this.openModalForm.get('rows2').value);

你也可以使用formControl.pacthValue（），做类似的事情

检查API输出

如果你需要添加多个内容，那么你需要一个表单而不是表单组件。

 FormArray.push(takesAnAbstraacFormControl)

FormArray.push(this.openModalForm.get('rows2').value);

因为javascript是通过引用传递的，你必须在你推送到数组的表单上调用new，否则你所形成的所有推送都将具有相同的引用。

this.openModalForm.get('rows2') = resetopenModalForm();


resetopenModalForm(initialValues): FormGroup {
    return new FormGroup({
      name: new FormControl(initialValues.name, [Validators.required])
     ....initilize other controls.....
    });
  }

我在这里添加新代码

import { Component, OnInit } from '@angular/core';
import {Validators, FormGroup, FormArray, FormControl, FormBuilder, AbstractControl} from '@angular/forms';


@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  transferForm: FormGroup;
  openModalFormArray: FormArray;
  formProperties;

  constructor() { }

  ngOnInit() {
    this.initopenModalFormArray();
  }

  add() {
    this.openModalFormArray.push(this.initOpenModalForm(new EmptyFormProperties()));
    console.log(this.openModalFormArray);
  }
  onSaveQuantity(){


    console.log(this.openModalFormArray.value);

}
  delete(index: number) {
    this.openModalFormArray.removeAt(index);
  }

  reset(index: number) {
    this.openModalFormArray.at(index).reset();
  }

  initopenModalFormArray() {
    this.formProperties.forEach(formProperty => {
      this.openModalFormArray.push(this.initOpenModalForm(formProperty));
    });
  }

  initOpenModalForm(formProperties): FormGroup {
    return new FormGroup({
      expiration_date: new FormControl(formProperties.expiration_date, [Validators.required]),
      ingredient_id: new FormControl(formProperties.ingredient_id, [Validators.required]),
      ingredient_sku: new FormControl(formProperties.ingredient_sku),
      ingredient_name: new FormControl(formProperties.ingredient_name),
      unit: new FormControl(formProperties.unit, [Validators.required]),
      available_qty: new FormControl(formProperties.available_qty, [Validators.required]),
      transfer_qty: new FormControl(formProperties.transfer_qty, [Validators.required]),
    });
  }
}

来自here

的灵感

Reactive Forms

1 个答案: