使用模态使动态形式成角度

Posted 2021-04-16

我对angular有点新，但我正在尝试创建一个动态表单，它将在我的数据库中创建一些字段，这些字段会根据同一模态顶部的下拉选择器而改变。我已经做了一些研究，但我发现的只是完整模块动态形式的帮助，而不是模态。这可能吗？如果是这样，那么开始这项研究的好地方是什么？

答案

实际上，这种类型的特征是Angular的一个非常重要的部分。

为了更好地证明这一点，see this example会根据您选择的国家/地区更改您可以选择的“状态”选项。

重要的部分是模板，它定义了页面的外观和数据的占位符......

<label>Country:</label> 
<select [(ngModel)]="selectedCountry.id" (change)="onSelect($event.target.value)">
  <option value="0">--Select--</option>
  <option *ngFor="let country of countries" value= {{country.id}}>{{country.name}}</option>
</select>

<br/><br/>

<div>
<label>State:</label>
<select>
  <option value="0">--Select--</option>
  <option *ngFor="let state of states " value= {{state.id}}>{{state.name}}</option>
</select>
</div>

...和控制器，它定义了应显示的数据。在模板中单击时，将控制控制器中的数据

export class AppComponent implements OnInit {
  name = 'Angular 5';

  selectedCountry: Country = new Country(2, 'Brazil');
  countries: Country[];
  states: State[];

  constructor(private selectService: SelectService) { }

  ngOnInit() {
    this.countries = this.selectService.getCountries();
    this.onSelect(this.selectedCountry.id);
  }

  onSelect(countryid) {
    this.states = this.selectService.getStates().filter((item) => item.countryid == countryid);
  }
}