具有动态选项的动态表单数组

Question

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

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

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

在此示例中，对于每个科目，学生将能够选择 4 个选项。

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

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

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

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

Answer 1

要擦除选项，请参阅堆栈溢出问题

如果您选择即时创建列表，则可以制作类似查看堆栈闪电战的内容

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

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中有一些像

 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>

已更新 我们需要检查 不可能选择相同的语言，因此我们订阅了数组选项的更改。因此，如果我们选择例如德语，Doraki，西班牙语和法语，并且在将德语替换为西班牙语后，则第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 })
        })
      })
    })