Ionic 3 FormArray验证动态单选按钮组

问题描述

我正在尝试验证从数组对象动态创建的单选按钮组，并且希望以以下形式进行验证:我已经发布了一个寻求答案的问题，但没有弄清楚，我再次进行了一些研究，发现了这一点文章紧随其后，找到了formArrayName，但无法实现验证

I am trying to validate radio button group that are dynamically created from a object of arrays and i want it to be validated in the form i have posted a questions seeking answer and i was not clarified and did some research again and found this article followed its trail and found formArrayName but am unable to achieve the validation

<form[formGroup]="form">
  <ion-select formControlName="type">
    <ion-option value="1">Full Time</ion-option>
    <ion-option value="2">Part Time</ion-option>
  </ion-select>

  <div formArrayName="employee_details">
    <ion-row class="rows" *ngFor="let employee of employee;  let rowIndex = index">
      <ion-col text-center="text-center" col-6="col-6">
        [ {{employee.id}} ]
        <br> {{employee.name}}
      </ion-col>
      <ion-col class="rows last" col-6="col-6">
        <ion-list class="row" no-lines="no-lines" radio-group="radio-group">
          <ion-item col-4="col-4">
            <ion-radio class="radio " mode="md" value="Paid"></ion-radio>
          </ion-item>
          <ion-item col-4="col-4">
            <ion-radio class="radio " mode="md" value="Unpaid"></ion-radio>
          </ion-item>

        </ion-list>
      </ion-col>
    </ion-row>
  </div>

</form>

JS

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

class type {
  public name: string;
  public id: string;
}
...
class employee {
  public name: string;
  public id: string;
}
...
employee: employee = [{
  id: 1,
  name: "emp1"
}, {
  id: 2,
  name: "emp2"
}, {
  id: 3,
  name: "emp3"
}];
form: FormGroup;

this.form = new FormGroup({
  'type': new FormControl(null, [Validators.required]),
  'employee_details': new FormArray([])
});
Object.keys(this.employee).forEach(function(key, index) {
  console.log(key);
  // problem is here
  const control = new FormControl(null, Validators.required);
  ( < FormArray > this.form.get('employee_details')).push(control);

});

推荐答案

这不是formArray，但肯定会对您有所帮助.

.html

<form [formGroup]="form">
<ion-row class="rows" *ngFor="let detail of details; let i = index">
    <ion-col text-center="text-center" col-6="col-6">
        {{your_data}}
    </ion-col>
    <ion-col class="rows last" col-6="col-6">
        <ion-list class="row" no-lines="no-lines" radio-group="radio-group" formControlName="action{{i}}">
            <ion-item col-4>
                <ion-radio class="radio true" mode="md" value="true"></ion-radio>
            </ion-item>
            <ion-item col-4>
                <ion-radio class="radio false" mode="md" value="false"></ion-radio>
            </ion-item>
            <ion-item col-4>
                <ion-radio class="radio " mode="md" value="not sure"></ion-radio>
            </ion-item>
        </ion-list>
    </ion-col>
</ion-row>
<button ion-button (click)="submit()" [disabled]="!form.valid">Submit</button>
</form>

.ts 在获取数据的地方添加此代码.

.ts Add this code where you get data.

let i;
for(i in this.details){
  this.form.setControl('action'+i, new FormControl('', Validators.required));
}

变量"i"仅用于产生0、1、2、3，以与控件名称相加.您可以使用自己的方式执行此操作，但需要循环.

variable 'i' just used to produce 0,1,2,3 to add with control name. you can use your way to do this but loop is required.

这篇关于Ionic 3 FormArray验证动态单选按钮组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！