Angular 8: не получить выбранные выпадающие значения в компоненте с помощью реактивной формы

Question

Я динамически заполняю раскрывающиеся списки и их значения. После выбора всех значений, когда я нажимаю кнопку отправки, я не могу установить их значение в форме, я получаю пустые значения.

HTML:

<div class="col-md-6" *ngFor="let type of types">
                        <div class="form-group">
                            <label>Select {{ type.cat_name }}</label>
                            <select class="form-control custom-select" 
                                (change)="onChangeType($event.target.value)"
                                [value]="type.key_name" >
                                <option value="">-- Select --</option>
                                <ng-container *ngFor="let subType of dynamicCategoryData">
                                    <option *ngIf="subType.key == type.key_name" [value]="subType.value">{{subType.value}}</option>
                                </ng-container>
                            </select>
                        </div>
                    </div>

компонент. ts

  ngOnInit() {
    this.uploadArtWorkForm = this.formBuilder.group({
      thumb_img: ['', [Validators.required]],
      categoryArray: this.formBuilder.array([]),
    });

  }

addUploadArtWorkForm() {
    console.log("this.uploadArtWorkForm.value", this.uploadArtWorkForm.value)
}

ВЫХОД:

{
    "categoryArray": [
        {
            "gems": null,
            "metal": null,
            "type": null
        }
    ]
}

Это только потому, что я не использую formControlName? Можем ли мы сделать это без этого?

Буду признателен за любую помощь.

Answer 1

Измените ваш app.component. html, как показано ниже:

<div class="col-md-6" formArrayName="categoryArray" *ngIf="uploadArtWorkForm.get('categoryArray')['controls'].length > 0">
        <div  *ngFor="let item of uploadArtWorkForm.get('categoryArray')['controls']; let k = index">
            <div [formGroup]="item">
                <div class="form-group ">
                    <label>Select {{ types[k].cat_name }}</label>
                    <select class="form-control custom-select" [class]="types[k].key_name" (change)="onChangeType($event.target.value)" formControlName="{{ types[k].key_name }}" *ngIf="types[k].cat_name == 'Type'"> 
              <option value="">-- Select --</option>
              <option *ngFor="let type of catTypeValue" [value]="type.cat_name">
                  {{type.cat_name}}
              </option>
          </select>
          <select class="form-control custom-select" [class]="types[k].key_name" (change)="onChangeType($event.target.value)" formControlName="{{ types[k].key_name }}" *ngIf="types[k].cat_name == 'Metal'">
              <option value="">-- Select --</option>
              <option *ngFor="let type of catMetalValue" [value]="type.category_id">
                  {{type.cat_name}}
              </option>
          </select>
          <select class="form-control custom-select" [class]="types[k].key_name" (change)="onChangeType($event.target.value)" formControlName="{{ types[k].key_name }}" *ngIf="types[k].cat_name == 'Gems'">
              <option value="">-- Select --</option>
              <option *ngFor="let type of catGemsValue" [value]="type.category_id">
                  {{type.cat_name}}
              </option>
          </select>
                </div>
            </div>
        </div>
    </div>

и app.component.ts, как показано ниже:

//below value will be displayed in Select Type dropdown
  catTypeValue = [{"parent_id":2,"cat_name":"Anklets","category_id":3,"key_name":"anklets"}, {"parent_id":2, "cat_name":"Body", "category_id":4, "key_name":"body"}, {"parent_id":2, "cat_name":"Bracelets","category_id":5, "key_name":""}, {"parent_id":2, "cat_name":"Charms","category_id":6, "key_name":""}, {"parent_id":2,"cat_name":"Necklaces","category_id":7, "key_name":""}, {"parent_id":2,"cat_name":"Ornamental","category_id":8, "key_name":""}, {"parent_id":2, "cat_name":"Rings & Studs","category_id":9, "key_name":""}, {"parent_id":2, "cat_name":"Jewelry Metal","category_id":10,"key_name":""}, {"parent_id":2, "cat_name":"Yellow Gold","category_id":11, "key_name":""}, {"parent_id":2, "cat_name":"White Gold","category_id":12,"key_name":"whitegold"}, {"parent_id":2, "cat_name":"Silver","category_id":13,"key_name":"silver"}
    ]

  // below values will be displayed in Select Metal dd
  catMetalValue = [
    {"parent_id":14,"cat_name":"White Gold","category_id":24,"key_name":"whitegold"},
    {"parent_id":14,"cat_name":"Yellow Gold","category_id":24,"key_name":"whitegold"},
    ]

  // below values will be displayed in Select Gems dd
  catGemsValue = [
    {"parent_id":15,"cat_name":"Blue Gems","category_id":25,"key_name":"bluegems"}
    ]

  constructor(private formBuilder: FormBuilder) {
    this.uploadArtWorkForm = this.formBuilder.group({
    cat_id: new FormControl('', Validators.required),
    categoryArray: this.formBuilder.array([]),
  });
  onChangeType(value, id){
    console.log(value);
  }
  onChangeCategory(event, id) {
    if (id) {
      this.types = [
        {"parent_id":1, "cat_name":"Type", "category_id":2, "key_name":"type"}, {"parent_id":1, "cat_name":"Metal", "category_id":14, "key_name":"metal"}, {"parent_id":1, "cat_name":"Gems", "category_id":15, "key_name":"gems"}];
      if(this.uploadArtWorkForm.controls['categoryArray'].length > 0){
        this.uploadArtWorkForm.controls['categoryArray'].controls.length = 0
      }
      this.addInNewCategory(this.types);
    } else {
      this.types = null;
      this.subTypes = null;
    }
  }

  get category(): FormArray {
    return <FormArray>this.uploadArtWorkForm.controls['categoryArray'];
  }

  addInNewCategory(types) {['categoryArray'];
    types.forEach((element, i) => {
      this.category.push(this.formBuilder.group({[element["key_name"]]: new FormControl(element["key_name"])
      }));
    });
  }
}