Как мне управлять массивами выбранных опций в проекте REACTIVE Angular-form?

Question

У меня есть проект формы, который имеет элементы управления формой и должен иметь массивы форм. Я сделал все приготовления, но мой список опций выходит пустым. И также, я не могу понять, как предварительно популярно оба других выбора, основываясь на выборе предыдущего. (В моей голове это выглядит как США (выбранные пользователем) -> Другой выбор оказывается списком штатов США. Позвольте пользователю выбрать другой вариант, например, Индия -> список индийских штатов в другом выборе).

Пожалуйста, помогите мне с этой реализацией. Я не могу понять это сам и, похоже, не могу найти подходящий пример.

Мой код:

Шаблон:

    <h2>Basic Details</h2>
<form class="form" [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
    <div class="form__group left">
        <div class="form__control form__first-name">
            <input type="text" name="Fname" required formControlName="">
            <label>First Name</label>
        </div>
        <div class="form__control form__email">
            <input type="email" name="email" required formControlName="email">
            <label>Email ID</label>
        </div>
        <div class="form__control form__country" >
            <span>Country</span>
            <select name="country">
                <option *ngFor="let country of countries; let i = index" [value]="country" formControlName="country">{{ country }}</option>
            </select>
        </div>
        <div class="form__control form__phone">
            <input type="number" name="phone" required formControlName="phone">
            <label>Phone Number</label>
        </div>
        <div class="form__control form__button--reset">
            <button type="button" (click)="onReset()">Reset All</button>
        </div>
    </div>
    <div class="form__group right">
        <div class="form__control form__last-name">
            <input type="text" name="Lname" required formControlName="lastName">
            <label>Last Name</label>
        </div>
        <div class="form__control form__ID">
            <input type="text" name="ID" required formControlName="id">
            <label>Your User ID</label>
        </div>
        <div class="form__control form__location">
            <div class="form__location--state">
                <span>State</span>
                <select name="state" formArrayName="state">
                </select>
            </div>
            <div class="form__location--city">
                <span>City</span>
                <select name="city" formArrayName="city">
                </select>
            </div>
        </div>
        <div class="form__control form__code">
            <input type="text" name="code" required formControlName="code">
            <label>Reference Code</label>
        </div>
        <div class="form__control form__button--submit">
            <button type="submit">Continue</button>
        </div>
    </div>
</form>

TS-код:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {
  signUpForm: FormGroup;
  countries = ['USA', 'India'];

  constructor() { }

  ngOnInit() {
    this.signUpForm = new FormGroup({
      'firstName': new FormControl(null),
      'email': new FormControl(null),
      'formCountries': new FormArray([]),
      'phone': new FormControl(null),
      'lastName': new FormControl(null),
      'id': new FormControl(null),
      'state': new FormArray([]),
      'city': new FormArray([]),
      'code': new FormControl(null)
    })
  }

}

Answer 1

Правильно ли, что вы хотите FormArray? Потому что FormArray означает, что у вас есть массив FormControl s. Если вы хотите иметь возможность выбирать только несколько состояний, например, из выбранных, измените FormArray s на FormControl s.

let myOptions: {viewValue: string, value: string, disabled: boolean} = [
  {
    viewValue: "Audi",
    value: "Audi",
    disabled: true
  }
];

<select formControlName="myControlName" multiple>
  <option *ngFor="let opt of myOptions" [disabled]="opt.disabled" [value]="opt.value">
    {{opt.viewValue}}
  </option>
</select>

myCountries: {
  name: string,
  states: {
    name: string,
    cities: {
      name: string,
      postcode: number
    }[]
  }[]
}[] = [
  name: 'USA',
  states: [
    {
      name: 'California',
      cities: [
        {
           name: 'My City',
           postcode: '123456'
        }
      ]
    }
  ]
]