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

问题描述 投票:0回答:1

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

angular forms dynamic modal-dialog
1个回答
0
投票

实际上,这种类型的特征是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);
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.