如何在角度 5 的嵌套 json 数组中发布值？

Question

我已经从 Web API 公开了嵌套的 json 格式。有人可以帮我从 Angular5 发送相同格式的数据

{"contractId":1,
 "contractName":"Temp",
 "contractServiceList":[
    {"id":1,
     "serviceId":{"serviceId":1,"serviceName":"Emergency Room"},
     "providerTier":"Tier 1",
     "coinsurance":100.0,
     "copay":10.0,
     "penaltyApplies":"Y",
     "penaltyRule":"Non Emergency ER Use",
     "penaltyType":"Dollar Amount",
     "penaltyValue":300.0,
     "deductibleApplies":"Y"
    }
  ]
}

下面是一段代码，它将内部列表“contractServiceList”设为空。如何订阅数据以便获取内部列表中的值

app.component.ts

ngOnInit() {
    this.addForm = this.formBuilder.group({
          contractName: ['', Validators.required],
          serviceName: ['', Validators.required],
          copayAmount: ['', Validators.required],
          coInsurance: ['', Validators.required],
          deductibleApplies: ['', Validators.required],
          penaltyApplies: ['', Validators.required],
          penaltyRule: ['', Validators.required],
          penaltyType: ['', Validators.required],
          penaltyValue: ['', Validators.required],
          deductibleAppliesPenalty: ['', Validators.required]
    });
}
onSubmit() {
    this.contractService.saveContract(this.addForm.value)
    .subscribe( data => {
        alert('Contract created successfully');
        console.log(data);
    });
}

service.ts

 saveContract(contract: Contract) {
    return this.http.post(this.baseUrl, contract).pipe(map(res => res.json));
  }

app.component.html

<form [formGroup]="addForm" (ngSubmit)="onSubmit()">
  <table>
<thead></thead>
<tbody>
<tr>
   <td>
   <div class="form-group col-xs-6">
      <label for="contractName">Contract Name:</label>
      <input formControlName="contractName" placeholder="Contract Name" class="form-control" name="contractName" id="contractName">
    </div>
   </td>
<td>
 <div class="form-group col-xs-6">
     <h4 style="margin-left:100px;">Penalty Conditions</h4>
    </div>
</td>
</tr>
<tr>
     <td>
    <div class="form-group col-xs-6">
      <label for="serviceName">Category Of Services:</label>
      <select id ="serviceName" formControlName="serviceName" name="serviceName" class="form-control">
    <option *ngFor="let serv of serviceId" [value]="serv.serviceId">{{serv.serviceName}}</option>
</select>
      </div>
    </td>
<td>
 <div class="form-group col-xs-6">
      <label for="penaltyApplies">Penalty Applies:</label>
       <select id ="penaltyApplies" formControlName="penaltyApplies" name="penaltyApplies" class="form-control">
    <option>--Select--</option>
    <option>Y</option>
    <option>N</option>
</select>
</div>
</td>
</tr>
<tr>
    <td>
    <div class="form-group col-xs-6">
      <label for="copayAmount">Copay Amount:</label>
      <input formControlName="copayAmount" placeholder="Copay Amount" class="form-control" name="copayAmount" id="copayAmount">
    </div>
    </td>
    <td>
    <div class="form-group col-xs-6">
      <label for="penaltyRule">Penalty Rule:</label>
       <select id ="penaltyRule" formControlName="penaltyRule" name="penaltyRule" class="form-control">
    <option>--Select--</option>
    <option>Non Emergency ER Use</option>
</select>
      </div>
    </td>
    </tr>
<tr>
    <td>
    <div class="form-group col-xs-6">
      <label for="deductibleApplies">Deductible Applies:</label>
        <select id ="deductibleApplies" formControlName="deductibleApplies" name="deductibleApplies" class="form-control">
    <option>--Select--</option>
    <option>Y</option>
    <option>N</option>
</select></div>
    </td>
    <td>
    <div class="form-group col-xs-6">
      <label for="penaltyType">Penalty Type:</label>
      <select id ="penaltyType" name="penaltyType" formControlName="penaltyType" class="form-control">
    <option>--Select--</option>
    <option>Coinsurance</option>
    <option>Dollar Amount</option>
</select></div>
    </td>
    </tr>

Answer 1

Meenal，ContractServiceList 是一个数组，所以你必须使用一个 ArrayForm。我建议总是做一个函数来返回一个表单

export class TabGroupBasicExample implements OnInit {
  addForm:FormGroup;

  //this function make easier access to the Form array
  get contractList() {
     return this.addForm.get('contractServiceList') as FormArray;
  }
  constructor(private formBuilder:FormBuilder){}

  //this function return a FormGroup empty or filled with the data
  createForm(data:any):FormGroup
  {
    return this.formBuilder.group({
      contractId: [data? data.contractId:'',Validators.required],
      serviceName: [data? data.serviceName:''], 
      //to return the array we use a function that return an array of FormGroup
      contractServiceList:this.formBuilder.array(
             this.createContractService(data?data.contractServiceList:null)
              )
      });
  }

  //see that createContractService return an array of FormGroup
  createContractService(data:any[]|null):FormGroup[]
  {
        //if receive a data array, for each item in array return 
        //a fromGroup with the value    
    return data?
      data.map(x=>{
        let group=this.formBuilder.group({
          copayAmount: [x.copayAmount, Validators.required],
          coInsurance: [x.coInsurance, Validators.required],
          deductibleApplies: [x.deductibleApplies, Validators.required],
          penaltyApplies: [x.penaltyApplies, Validators.required],
          penaltyRule: [x.penaltyRule, Validators.required],
          penaltyType: [x.penaltyType, Validators.required],
          penaltyValue: [x.penaltyValue, Validators.required],
          deductibleAppliesPenalty: [x.deductibleAppliesPenalty, Validators.required]
            });
        return group;
      }):
      [this.formBuilder.group(
        {
          copayAmount: ['', Validators.required],
          coInsurance: ['', Validators.required],
          deductibleApplies: ['', Validators.required],
          penaltyApplies: ['', Validators.required],
          penaltyRule: ['', Validators.required],
          penaltyType: ['', Validators.required],
          penaltyValue: ['', Validators.required],
          deductibleAppliesPenalty: ['', Validators.required]
        })]
  }


  ngOnInit()
  {
    this.addForm=this.createForm(null)
    }
}

更新 如果你有像

这样的对象

let contrat={
  "contractId": "2",
  "serviceName": "qqqq",
  "contractServiceList": [
    {
      "copayAmount": "12",
      "coInsurance": "22553",
      "deductibleApplies": "12",
      "penaltyApplies": "",
      "penaltyRule": "",
      "penaltyType": "1",
      "penaltyValue": "",
      "deductibleAppliesPenalty": "2"
    }
  ]
}

你可以做

this.addForm=this.createForm(contract)

然后您就可以准备好更新的值了。

您的 .html 必须考虑到您正在使用 formArray

    <form *ngIf="addForm" [formGroup]="addForm" >
      <!--or your fileds not in array-->
       <input formControlName="contractId"/>
       <input formControlName="serviceName">
      <!--Your form Array name---->
    <div formArrayName="contractServiceList">
    <!--a div *ngFor over addForm.get('contractServiceList').controls 
     don't forget formGroupName="i"-->
    <div *ngFor="let items of contractList.controls; let i=index" 
            [formGroupName]="i">

         <!--al your controls of the array here-->
       <input formControlName="copayAmount"/>
       <input formControlName="coInsurance"/>
       ....
    </div>
</div>
<!--just for check -->
<pre>{{addForm?.value |json}}</pre>

你想制作一个表格，更改.html

更新 2 如果我们想验证 formArray 本身，我们可以构建一个自定义验证器。好吧，我喜欢将自定义验证器作为自己组件中的函数。对于更普遍的自定义验证器-多个组件中的用户-请参阅https://angular.io/guide/form-validation#custom-validators

所以，我们可以在component.ts中添加

   arrayValidator(){

    return (control: FormArray) => {
      console.log(control.value);
      //using value, you return an object if error or null
      return null;
    }
  }   

并在创建数组时更改为

  contractServiceList:this.formBuilder.array(
         this.createContractService(data?data.contractServiceList:null),
         this.arrayValidator()
          )