Formulaires réactifs avec plusieurs Dropdowns

Question

Je suis très nouveau à Angular2/4 et en essayant peu de choses.

Je suis en train d'utiliser formes réactives dans Angular4 et je suis en train d'obtenir 3 listes déroulantes pour afficher les données comme ci-dessous: -

Je veux concevoir une barre de filtre, qui permettra à un utilisateur de filtrer les éléments basé sur les options disponibles.

Il y a 3 éléments ici,

1. clients (DropDown1)
2. Sites (DropDown2)
3. actifs (DropDown3)

Les clients ont NOMBREUX SITES, Les sites ont ATOUTS beaucoup.

Scénarios

Scénario 1 - Lorsque l'utilisateur clique sur le client 1, il doit voir tous les sites et les actifs disponibles dans le menu déroulant

Scénario 2 - Quand ils utilisateur clique sur les sites 1 sous client 1, il devrait uniquement les actifs dans ce site

Scénario 3 - est le même que 2, l'utilisateur clique sur le site 2 sous client 2, il devrait voir les actifs que sous ce site

Scénario 4 - C'est pareil comme 1, 2, 3, juste un client différent est cliqué.

données JSON est comme ci-dessous: -

import { User } from './models/user'; 
 

 
export const DATA: User[] = 
 
[ 
 
    { 
 
     "id": 1, 
 
     "name": "Customer 1", 
 
     "sites": [ 
 
        {"id": 2, "name": "Site 1", "assets": [{"id": 3, "name": "Asset 1"}] }, 
 
        {"id": 4, "name": "Site 2", "assets": [{"id": 5, "name": "Asset 2"}] }, 
 
        {"id": 6, "name": "Site 3", "assets": [{"id": 7, "name": "Asset 3"}] } 
 
       ] 
 
    }, 
 
    { 
 
     "id": 8, 
 
     "name": "Customer 2", 
 
     "sites": [ 
 
        {"id": 9, "name": "Site 4", "assets": [{"id": 10, "name": "Asset 4"}] }, 
 
        {"id": 11, "name": "Site 5", "assets": [{"id": 12, "name": "Asset 5"}] }, 
 
        {"id": 13, "name": "Site 6", "assets": [{"id": 14, "name": "Asset 6"}] } 
 
       ] 
 
    }, 
 

 
    { 
 
     "id": 15, 
 
     "name": "Customer 3", 
 
     "sites": [ 
 
        {"id": 16, "name": "Site 7", "assets": [{"id": 17, "name": "Asset 7"}] }, 
 
        {"id": 18, "name": "Site 8", "assets": [{"id": 19, "name": "Asset 8"}] }, 
 
        {"id": 20, "name": "Site 9", "assets": [{"id": 21, "name": "Asset 9"}] } 
 
       ] 
 
    } 
 
]

service

est comme ci-dessous: -

import { Injectable } from '@angular/core'; 
 

 
import { User } from './models/user'; 
 
import { DATA } from './mock-data'; 
 

 
@Injectable() 
 
export class UserService { 
 
    getData(): Promise<User[]> { 
 
    return Promise.resolve(DATA); 
 
    } 
 
}

HTML est comme ci-dessous: -

<div class="container"> 
    <div class="row"> 
    <h1>Customer Details</h1><br> 

    <form [formGroup]="myForm" novalidate> 

     <div class="col-md-4" id="firstname"> 
      <select id="customernames" formControlName="customernames"> 
      <option *ngFor="let d of data"> 
        {{d.name}} 
      </option> 
      </select> 
     </div> 

     <div class="col-md-4" id="firstname"> 
      <select id="sites" formControlName="sites"> 
      <option *ngFor="let d of data"> 
        {{d.name}} 
      </option> 
      </select> 
     </div> 

     <div class="col-md-4" id="firstname"> 
      <select id="assets" formControlName="assets"> 
      <option *ngFor="let d of data"> 
        {{d.name}} 
      </option> 
      </select> 
     </div> 

    </form> 

    </div> 
</div> 

Component est comme ci-dessous: -

import { Component, OnInit } from '@angular/core'; 
 
import { HttpClient, HttpResponse, HttpErrorResponse, HttpHeaders, HttpParams, HttpRequest, HttpEventType } from '@angular/common/http'; 
 
import { FormGroup, FormControl, Validators } from '@angular/forms'; 
 

 
import { User } from './models/user'; 
 
import { UserService } from './app.service'; 
 

 
@Component({ 
 
    selector: 'app-root', 
 
    templateUrl: './app.component.html', 
 
    styleUrls: ['./app.component.css'] 
 
}) 
 
export class AppComponent implements OnInit{ 
 
    data: User[]; 
 
    myForm: FormGroup; 
 

 
    constructor(private userService: UserService) { 
 

 
    } 
 

 
    getData(): void { 
 
    this.userService.getData().then(response => this.data = response); 
 
    } 
 

 
    ngOnInit(): void { 
 
    this.getData(); 
 

 
    this.myForm = new FormGroup({ 
 
     customernames: new FormControl('', Validators.required), 
 
     sites: new FormControl('', Validators.required), 
 
     assets: new FormControl('', Validators.required) 
 
    }) 
 
    } 
 

 
}

Je crée sous forme réactive suivante comme lien ci-dessous: -

https://angular.io/guide/reactive-forms

Aussi j'ai regardé dans les formes dynamiques ci-dessous, mais ils me confondre: -

https://angular.io/guide/dynamic-form

Questions: -

1. Comment puis-je placer des données dans les listes déroulantes (je ne ai pu le faire pour le client noms)
2. Devrais-je utiliser l'approche Formulaire Dynamique et comment?

3. Comment puis-je obtenir la sélection d'un scénario comme: -

   Customer1 (sélectionné en 1ère Dropdown) ---> Sites (2ème menu déroulant a des sites liés à Cutomer1) ---> Actif (Actif au par Sites)

Toute aide/conseils seraient appréciés.

Answer 1

Je ne crois pas que vous ayez besoin d'utiliser des formes dynamiques pour cette approche.

Mon approche serait juste à toute la logique dans votre fichier html.

<div class="container"> 
 
    <div class="row"> 
 
    <h1>Customer Details</h1><br> 
 

 
    <form [formGroup]="myForm" novalidate> 
 

 
     <div class="col-md-4" > 
 
     <select formControlName="customernames"> 
 
      <option *ngFor="let user of userData" [ngValue]="user"> 
 
      {{user.name}} 
 
      </option> 
 
     </select> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <select formControlName="sites" > 
 
      <option *ngFor="let site of myForm.get('customernames').value.sites" [ngValue]="site"> 
 
      {{site.name}} 
 
      </option> 
 
     </select> 
 
     </div> 
 

 
     <div class="col-md-4" > 
 
     <select formControlName="assets" > 
 
      <option *ngFor="let asset of myForm.get('sites').value.assets" [ngValue]="asset"> 
 
      {{asset.name}} 
 
      </option> 
 
     </select> 
 
    </form> 
 

 
    </div> 
 
</div>

Ce n'est pas une solution robuste, mais nous espérons que vous donne une idée.