如何管理REACTIVE Angular表单项目中的选择选项数组

Question

我有一个表单项目，它有表单控件，应该有表单数组。我已经做了所有的准备工作，但我的选项表是空的。而且，我不知道如何在选择前一个的基础上，预先流行另一个选择。(在我的脑海中，它看起来像美国(由用户选择(->其他选择原来是美国各州的列表。Happen用户选择了一些其他选项，如印度->另一个选择中的印度邦列表(。

请帮我实现这个功能。我自己想不通，似乎也找不到合适的例子。

我的代码是：

模板：

<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意味着你有一个FormControls的数组。如果你只想从一个选择中选择多个状态，例如，将你的FormArrays更改为FormControls。

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