Angular FormArray复选框 [英] Angular formarray checkboxes

问题描述

什么是设置此代码的正确方法.我要用户选择复选框，然后将该复选框的值压入FormArray，现在我得到[true,false,false]输出

what is the proper way to setup this code. I want to user select checkbox and value of that checkbox to be pushed into FormArray now I get [true,false,false] output

data = ['Marka', 'Kilometraza', 'Alu felne'];

addCheckboxes() {
    this.data.map((o, i) => {
      const control = new FormControl(i === 0);
      this.checkboxes.controls.push(control);
    });
  }

HTML

<div formArrayName="checkboxes" *ngFor="let check of regForm.get('detaljne').get('checkboxes').controls;index as i">
   <mat-checkbox [formControlName]="i">{{ data[i] }}</mat-checkbox>
</div>

现在，我得到输出，当第一个复选框被选中，但我想选择的复选框的值，所以只有选择复选框的值是在，所以当有标签马卡"复选框比检查FormArray为['Marka']

推荐答案

另一种方法是使用自定义表单控件.看看 stackblitz

Another way is used a custom form control. Take a look the stackblitz

自定义控件接受两种类型的数据"，像这样的简单数组

The custom control admit two type of "data", a simple array like

data = ['Marka', 'Kilometraza', 'Alu felne'];

或对象数组.您看到的第一个字段是键"，第二个字段是您的文本"

Or a array of object. the first field becomes the "key" and the second one the "text" you see

dataValue=[{value:1,text:'Marka'}, 
           {value:2,text:'Kilometraza'},
           {value:3,text:'Alu felne'}]

代码，我将尝试解释n条注释，例如:

The code, I'll try explain n comments is like:

@Component({
  selector: 'check-box-list',
  template: `
  <div [formGroup]="formArray">
    <!--see the "special way" we refereed to the elements of formArray
         using [fromControl]="variable of loop"
    -->
    <div *ngFor="let check of formArray.controls;let i=index">
           <!--we show or _data[i] or _data[i][text], see below -->
      <mat-checkbox [formControl]="check">{{key?_data[i][text]:_data[i]}}</mat-checkbox>
    </div>
  `,
   <!--it's necesary a provider NG_VALUE_ACCESSOR-->
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CheckBoxListComponent),
      multi: true
    }
  ]
})
export class CheckBoxListComponent implements ControlValueAccessor {
  formArray: FormArray = new FormArray([])
  isValue: boolean = false;
  text: string;  //I stored in "text" the field that it's showed
  key: string;   //I stored in "key" the field that has the "value"
  _data

  @Input() set data(value) {
    this._data = value;
    //data[0] can be an array or a string/number
    //if is an object we get the "keys", e.g.
    //data[0]={value:....,text:....}, this.getOrderedKeys return an array ["value","text"]
    const keys = typeof (value[0]) == 'object' ? this.getOrderedKeys(value[0]) : null
    if (keys) {
      this.key = keys[0]
      this.text = keys[1]
    }
  }

  onChange;
  onTouched;

  writeValue(value: any[] | any): void {
    //with each value of "data" we create a formControl with value true or false
    this.formArray = new FormArray(
      this._data.map((x, index) =>
        new FormControl(value.indexOf(this.key ? this._data[index][this.key] :
                                      this._data[index]) >= 0)))

    //we subscribe to the formArray valueChanges
    this.formArray.valueChanges.subscribe((res) => {
      this.onTouched()  //we mark as touched the custom form control
      //we make a filter of data
      const response = res.indexOf(true) >= 0 ?
        this._data.filter((x, index) => this.formArray.value[index]) :
        null
      //if has key, return only the array with the keys
      this.onChange(response == null ? null : this.key ? 
                 response.map(x => x[this.key]) : 
                 response)

    })
  }


  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    //if we disabled/enabled the control simply disabled/enabled the controls
    this.formArray.controls.forEach(c => {
      if (isDisabled)
        c.disable();
      else
        c.enable();
    })
  }

  getOrderedKeys(obj): string[] {
    return JSON.stringify(obj)
      .replace(/[&\/\\#+()$~%.'"*?<>{}]/g, '')
      .split(',')
      .map(x => x.split(':')[0]);
  }
}

我们可以使用

<form [formGroup]="form3">
  <check-box-list [data]="dataValue" formControlName="checkboxes">
  </check-box-list>
 </form>
//where
   this.form3=new FormGroup(
      {
        checkboxes:new FormControl([1,3])
      }
    )

这篇关于Angular FormArray复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！