具有动态选项的动态表单数组 [英] Dynamic form array with dynamic options

问题描述

我想让学生能够在动态数量的学校科目中选择几个工作坊

I want to make a student able to choose several workshops in a dynamic number of school subjects

1.-我有一个配置数组，该数组具有学生将为每个学科选择的选项的数量

1.- I have a config array, this array have the number of options of the student will choose for every subject

let configarray = {initdate: 2019-07-01, subjectnumber: 4};

在此示例中，学生可以为每个学科选择4个选项.

In this example for every subject the student will be able to choose 4 options.

let b = this.FormGuardar.get("opciontaller") as FormArray; 
for (let i = 0; i < configarray.subjectnumber; i++) {
     let preregistro = this._fb.group({
         preregistroid: [],
         alumnoporcicloid:[],
         tallercurricularid: []
         });
         b.push(preregistro);
         this.arrayopcion.push({ taller: this.tallerselect }); //tallerselect will display
the options of every subject every subject will have a diferent options

另外，当我选择一个选项时，这是我的代码，用于删除配置中其他选择项中的所选选项.

Also when i select a options this is my code for erase the selected option in the other selects in the configurations.

    selectedTaller(id, index) {
    let seleccionados = [];
    let array = this.FormGuardar.get("opciontaller").value;
    for (let a of array) {
        if (a.tallercurricularid) {
            seleccionados.push(a.tallercurricularid);
        }
    }

    let disponibles = this.SelectTaller.filter(function (item) {
        return seleccionados.indexOf(item.tallercurricularid) == -1;
    });

    for (let i = 0; i < this.arrayopcion.length; i++) {
        let data = [...disponibles],
            control = ((this.FormGuardar.controls.opciontaller as FormArray).controls[i] as FormGroup).controls.tallercurricularid as FormControl,
            seleccionado = this.SelectTaller.find(x => x.tallercurricularid == control.value);
        (((this.FormGuardar.controls.opciontaller as FormArray).controls[i] as FormGroup).controls.clasificadorparaescolarid as FormControl).setValue(seleccionado ? seleccionado.clasificadorparaescolaresid.clasificadorparaescolaresid : null);
        seleccionado ? data.push(seleccionado) : null;
        this.arrayopcion[i].taller = data;
        seleccionado ? control.setValue(seleccionado.tallercurricularid) : null;
    }
}

这里的问题是我如何才能使此代码适用于动态数量的主题，并为每个研讨会提供动态选项?

The question here is how can i make this code work for a dynamic number of subjects with a dynamic options for every workshops?

推荐答案

要删除选项，请参见如果您选择即时创建列表，则可以进行类似请参阅stackblitz

If you choose create on-fly the list, you can make something like see stackblitz

您有一个递归函数，该函数将索引，控件数组和带有选择选项的数组作为参数-在这种情况下，我在语言列表之间进行选择-

You has a recursive function that take as argument an index, an array of controls and an array with the options to choose -in this case I choose between a list of languages-

getLang(i, array, languageList) {
    return i == 0 ? languageList :
      this.getLang(i - 1, array, languageList.filter(x => x.name != array[i - 1].value))
  }

如果您有类似的功能

createStudent() {
  const auxiliar = new Array(this.configarray.subjectNumber).fill('')
    return new FormGroup(
      {
        name: new FormControl(),
        options: new FormArray(auxiliar.map(x => new FormControl()))
      }
    )
  }

您可以在ngOnInit中添加一些类似的内容

You can has in ngOnInit some like

 this.formArray=new FormArray([]);
 this.formArray.push(this.createStudent())
 this.formArray.push(this.createStudent())

我们的表单就像

<form *ngIf="formArray" [formGroup]="formArray">
    <div *ngFor="let form of formArray.controls">
        <div [formGroup]="form">
            <input formControlName="name">
            <div formArrayName="options">
              <div *ngFor="let a of form.get('options').controls;let i=index" >
                 <select  [formControlName]="i">
                    <option value="null" disabled>Select Language</option>
                    <option *ngFor="let lang of 
                       getLang(i,form.get('options').controls,languageList)"
                       [value]="lang.name" >{{lang.name}}</option>
                </select>
           </div>
        </div>
    </div>
    <hr/>
  </div>
</form>

已更新，我们需要检查是否无法选择相同的语言，因此我们同意更改数组选项.所以，如果我们选择德语，多拉奇语，西班牙语和法语，并用西班牙语替换德语后，第三个选项变为空

Updated We need check not possible choose the same language, so we subscribe to changes of the arrays options. So, if we choose e.g. German,Doraki,Spanish and French, and after replace German by Spanish, the 3th options becomes null

this.formArray.controls.forEach(form => {
      form.get('options').valueChanges.subscribe(res => {
        res.forEach((x, index) => {
          if (index > 0 && res.slice(0, index).find(a=>a==x))
            (form.get('options') as FormArray).at(index).setValue(null, { emit: false })
        })
      })
    })

这篇关于具有动态选项的动态表单数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！