Как мне заполнить выбранные параметры в форме в Angular

Question

У меня есть форма с множеством вариантов выбора.Мне нужно заполнить их.Изначально через JSON, но позже я буду пополнять свою базу данных.

Как мне поступить?

Это будет мой HTML.

<div class="container mt-4">
  <div class="card">
    <form>
        <div class="card-header">Search for a Property</div>
        <div class="card-body">

          <!-- County and Town Label-->
          <div class="row">
            <div class="col-md-6">
              <label class="ml-1" for="county">County</label>
            </div>
            <div class="col-md-6">
              <label for="town">Town</label>
            </div>
          </div>

          <div class="row">
            <!-- County Column -->
            <div class="col-md-6">
              <select class ="form-control" id="county" name="county">
              </select>
            </div>
            <div class="col-md-6">
              <select class="form-control" name="town">
              </select>
            </div>
          </div>

        </div>
    </form>
  </div>
</div>

Это будетmy js.

Есть ли способ просто заполнять массивы для каждого нужного мне выбора и проходить по каждому элементу.

export class PropertySearchComponent implements OnInit {

  searchForm: FormGroup;

  constructor(private advertService: AdvertService, private alertify: AlertifyService, private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.createSearchForm();
  }

  createSearchForm() {
    this.searchForm = this.formBuilder.group({
      town: [, Validators.required],
      county: [, Validators.required],
    });
  }
}

Answer 1

Вам нужно заполнить некоторые массивы в вашем файле .ts (я предполагаю, что вы используете TypeScript), например этот:

counties: string[] = ['County1', 'County2', 'County3'];

Затем в файле шаблона:

<select class ="form-control" id="county" name="county">
  <option value="">Please select a county</option>
  <option *ngFor="let county of counties"
          [value]="county">{{county}}
  </option>
</select>

Angular просто нужно знать, что делать через цикл, и иметь ссылку на него в вашем шаблоне.Это отличная ссылка: https://codecraft.tv/courses/angular/forms/model-driven/