используя модальный, чтобы сделать динамическую форму угловой - PullRequest
0 голосов
/ 05 сентября 2018

Я немного новичок в angular, но я пытаюсь создать динамическую форму, которая создаст что-то в моей базе данных, у которой есть поля, которые меняются в зависимости от выпадающего селектора в верхней части того же модального окна. Я провел некоторые исследования, но все, что я нашел, - это помощь с динамическими формами полного модуля, а не модальные. Это возможно? И если так, что было бы отличным местом, чтобы начать это исследование?

1 Ответ

0 голосов
/ 05 сентября 2018

Действительно, этот тип функции является очень важной частью Angular.

Для хорошей демонстрации этого, см. Этот пример , который меняет параметры, которые "Штаты" вы можете выбрать в зависимости от выбранной страны.

Важными частями являются шаблон, который определяет внешний вид страницы и заполнителей для данных ...

<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);
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...