Angular 8, Как я могу создать реактив, откуда при выборе одного выпадающего выбирается другой? - PullRequest
Новая
       17

Angular 8, Как я могу создать реактив, откуда при выборе одного выпадающего выбирается другой?

0 голосов
/ 24 октября 2019

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

Это то, что я имею до сих пор. Любая помощь очень ценится.

Это структура объекта, с которой я работаю. 

{
"content": [
    {
        "name": "Furniture",
        "types": [
            {
                "name": "Shelving",
                "state": [
                    "loose"
                ],
                "units": [
                    "kgs",
                    "units"
                ],
                "repeat": [
                    "MDP",
                    "Oak",
                    "Pine",
                    "Other"
                ]
            },
            {
                "name": "Tables",
                "state": [
                    "loose"
                ],
                "units": [
                    "Units"
                ],
                "repeat": [
                    "MDP",
                    "Oak",
                    "Pine",
                    "Other"
                ]
            },
            {
                "name": "Drawers",
                "state": [
                    "loose"
                ],
                "units": [
                    "units"
                ],
                "repeat": [
                    "MDP",
                    "Oak",
                    "Pine",
                    "Other"
                ]
            },
            {
                "name": "Cupboard",
                "state": [
                    "loose"
                ],
                "units": [
                    "units"
                ],
                "repeat": [
                    "MDP",
                    "Oak",
                    "Pine",
                    "Other"
                ]
            },
            {
                "name": "Desks",
                "state": [
                    "loose"
                ],
                "units": [
                    "units"
                ],
                "repeat": [
                    "MDP",
                    "Oak",
                    "Pine",
                    "Other"
                ]
            },
            {
                "name": "Doors",
                "state": [
                    "loose"
                ],
                "units": [
                    "units"
                ],
                "repeat": [
                    "MDP",
                    "Oak",
                    "Pine",
                    "Other"
                ]
            }
        ]
    },
    {
        "name": "Glass",
        "types": [
            {
                "name": "Bottles",
                "state": [
                    "crushed",
                    "fragmented",
                    "loose"
                ],
                "units": [],
                "repeat": []
            }
        ]
    },
    {
        "name": "Plastics",
        "types": [
            {
                "name": "PP",
                "state": [
                    "bailed",
                    "loose"
                ],
                "units": [
                    "kgs"
                ],
                "repeat": [
                    "black",
                    "transparent",
                    "other"
                ]
            },
            {
                "name": "PVC",
                "state": [
                    "bailed",
                    "loose"
                ],
                "units": [
                    "kgs"
                ],
                "repeat": [
                    "black",
                    "transparent",
                    "other"
                ]
            },
            {
                "name": "HDPE",
                "state": [
                    "bailed",
                    "loose"
                ],
                "units": [
                    "kgs"
                ],
                "repeat": [
                    "black",
                    "transparent",
                    "other"
                ]
            },
            {
                "name": "PTE",
                "state": [
                    "bailed",
                    "loose"
                ],
                "units": [
                    "kgs"
                ],
                "repeat": [
                    "black",
                    "transparent",
                    "other"
                ]
            },
            {
                "name": "LDPE",
                "state": [
                    "bailed",
                    "loose"
                ],
                "units": [
                    "kgs"
                ],
                "repeat": [
                    "black",
                    "transparent",
                    "other"
                ]
            }
        ]
    }

}

Это моя реактивная форма в ее нынешнем виде, но я не могуоберните мою голову, как создать это. 

<form [formGroup]="findResourcesForm" (submit)="onSubmit()">

          <div class="resources-group" formGroupName="resources">

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Resources</label>
                  <select class="form-control" (change)="onResourcesChange($event)" formControlName="resourceNames">
                    <option value="" disabled>Select a Resource</option>
                    <option *ngFor="let res of catagories" [ngValue]="res">{{res.name}}</option>
                  </select>
                </div>
              </div>

              <div class="col-md-6">
                <div class="form-group">
                  <label>Resources Type</label>
                  <select class="form-control" formControlName="resourceTypes">
                    <option value=""></option>
                  </select>
                </div>
              </div>
            </div>
            <!-- end resources and resource types -->

            <div class="form-group">
              <label>Resources Subtype</label>
              <select class="form-control" formControlName="resourceTypesName">
                <option value=""></option>
              </select>
            </div>





        </form>

Компонент поддержки 

errorMessage = '';

catagories: any[];

findResourcesForm: FormGroup;

constructor(private dataInfoService: DataInfo, public fb: FormBuilder) {}

ngOnInit() {
 this.getAllCatagories();

this.findResourcesForm = this.fb.group({
  resources: this.fb.group({
    resourceNames: ['', [Validators.required]],
    resourceTypes: ['', [Validators.required]],
    resourceTypesName: ['', [Validators.required]],
    resourceTypesState: ['', [Validators.required]],
    resourceTypesUnits: ['', [Validators.required]],
    resourceTypesUnitsValue: ['', [Validators.required]],
    resourceTypesRepeat: ['', [Validators.required]]
  })
 });


}

getAllCatagories() {
this.dataInfoService.findAllCatagories().subscribe(
  response => {
    this.catagories = response.content;
    console.log(this.catagories);
   },
   error => {
    this.errorMessage = error;
    console.log('Catagories Error ', error);
   }
  );
 }


onSubmit() {
 console.log('form');
}

 onResourcesChange(res) {
    console.log(res);
}

1 Ответ

0 голосов
/ 24 октября 2019

с событием: 

onOptionOneChanged(event: any) {
  this.selectedOptionOne = this.optionOne.find(n => n.wathever == event.target.value);
  this.setFormControlOptionTwoValue(this.selectedOptionOne.id);
}

И вы должны написать собственный валидатор формы для этого случая.

...