具有多个下拉列表的反应式表单

Question

我对 Angular2/4 很陌生，尝试了一些东西。

我正在尝试在 Angular4 中使用 反应式表单 并且我正在尝试使用 3 个下拉列表来显示如下数据：-

我想设计一个过滤栏，允许用户根据可用选项过滤项目。

这里有3个元素，

客户 (DropDown1)
站点 (DropDown2)
资产 (DropDown3)

客户有很多站点，站点有很多资产。

场景

场景 1 - 当用户点击客户 1 时，他应该在下拉列表中看到所有可用的站点和资产

场景 2 - 当用户点击客户 1 下的站点 1 时，他应该只能看到该站点中的资产

场景 3 - 与 2 相同，用户点击客户 2 下的站点 2，他应该只能看到该站点下的资产

场景 4 - 这与 1、2、3 相同，只是点击了不同的客户。

JSON 数据如下：-

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"}] }
                 ]
    }
]

服务如下：-

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 如下所示：-

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

组件如下：-

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

}

所以我创建了如下反应形式 link:-

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

我还查看了下面的动态表单，但它们让我感到困惑：-

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

问题：-

如何将数据放入这些下拉列表中（我只能为客户名称这样做）
我应该使用动态表单方法吗？如何使用？
我将如何实现选择这样的场景：-

Customer1（在第一个下拉列表中选择）---> 网站（第二个下拉列表包含与 Cutomer1 相关的网站）---> 资产（根据网站的资产）

Any help/guidance would be appreciated.

Answer 1

我认为您不需要为此方法使用动态表单。

我的方法只针对您 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>

这不是一个可靠的解决方案，但希望能给您一个想法。

具有多个下拉列表的反应式表单

Reactive Forms with Multiple Dropdowns

html

javascript

angularjs

angular2-forms

angular2-services