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

问题描述

我想让学生能够在动态数量的学校科目中选择多个研讨会

1.- 我有一个配置数组，这个数组包含学生为每个科目选择的选项数量

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

在这个例子中，学生可以为每个科目选择 4 个选项.

let b = this.FormGuardar.get("opciontaller") as FormArray;for (让我 = 0; i < configarray.subjectnumber; i++) {让 preregistro = this._fb.group({预注册:[]，明矾:[],高课程id:[]});b.push(preregistro);this.arrayopcion.push({高: this.tallerselect });//较高的选择将显示每个科目的选项每个科目都会有不同的选择

此外，当我选择一个选项时，这是我在配置中的其他选择中擦除所选选项的代码.

 selectedTaller(id, index) {让选择 = [];让数组 = this.FormGuardar.get("opciontaller").value;for (let a of array) {如果(a.tallercurricularid){seleccionados.push(a.tallercurricularid);}}让 disponibles = this.SelectTaller.filter(function (item) {返回 seleccionados.indexOf(item.tallercurricularid) == -1;});for (让 i = 0; i < this.arrayopcion.length; i++) {让数据 = [...dissponibles]，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);选择?data.push(seleccionado) : null;this.arrayopcion[i].taller = 数据；选择?control.setValue(seleccionado.tallercurricularid) : null;}}

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

解决方案

要删除选项，请参阅 stackoverflow 问题

如果您选择动态创建列表，您可以制作类似 见stackblitz

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

getLang(i, array, languageList) {返回 i == 0 ?语言列表:this.getLang(i - 1, array, languageList.filter(x => x.name != array[i - 1].value))}

如果你有这样的功能

createStudent() {const auxiliar = new Array(this.configarray.subjectNumber).fill('')返回新的 FormGroup({名称:new FormControl(),选项: new FormArray(auxiliar.map(x => new FormControl()))})}

你可以在 ngOnInit 中加入一些类似的东西

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

我们的表格就像

<div *ngFor="let form of formArray.controls"><div [formGroup]="表单"><input formControlName="name"><div formArrayName="选项"><div *ngFor="let a of form.get('options').controls;let i=index" ><选择 [formControlName]="i"><option value="null" disabled>选择语言</option><option *ngFor="let lang ofgetLang(i,form.get('options').controls,languageList)"[value]="lang.name" >{{lang.name}}</option></选择>

<小时/>

</表单>

更新我们需要检查不可能选择相同的语言，所以我们订阅数组选项的更改.所以，如果我们选择例如德语、多拉基语、西班牙语和法语，用西班牙语替换德语后，第3个选项为空

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 })})})})

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

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};

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?

解决方案

To erase the options, see stackoverflow question

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))
  }

If you has a function like

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

You can has in ngOnInit some like

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

And our form is like

<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屋！