Angular - окно ввода реактивной формы - проблема с выпадающими опциями

Question

Я попытался использовать реактивную группу форм, чтобы создать форму управления формой поля ввода и выбрать значение раскрывающегося списка тегов.Но когда я открываю экран, выпадающее окно становится пустым, когда я нажимаю на него, оно наполняется данными.

Я хочу показать значение заполнителя при открытии экрана, и пользователь может перейти в раскрывающийся список и выбрать значение параметров.

HTML

[formGroup]="selectieForm">
      <div class="row">
        <div class="col-md-12">
          <div class="content-background">
            <div class="content">

              <div class="row">
                <div class="col-md-2">
                  <div class="input">
                    <input type='text' placeholder="BRINNaam" formControlName="identificatieBrin" class="input_control input_control--text input_control--validate input_control--large">
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="input">
                    <input type="text" placeholder="Vestiging" formControlName="identificatieVestiging" class="input_control input_control--text input_control--validate input_control--large">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="inpu">
                    <select id="signalType"  class="input_control input_control--m  input_control--select" formControlName="identificatieSelectieSignals">
                      <option value="" disabled hidden>Choose Signal </option>
                      <option  *ngFor="let signal of signals" [value]="signal">{{signal.label}}</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-2" >
                  <div class="input">
                    <select id="jaar" class="input_control input_control--m  input_control--select " formControlName="identificatieSelectieJaar">
                      <option value="" disabled hidden>Choose BeKostiging Jaar </option>
                      <option [value]="jaar" *ngFor="let jaar of jaren">{{jaar.label}}</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-2" >
                  <div class="input">
                    <select class="input_control input_control--m  input_control--select" formControlName="identificatieSelectieSoort">
                      <option value="" disabled hidden>Choose Teldatum Soort </option>
                      <option [value]="type" *ngFor="let type of types">{{type.label}}</option>
                    </select>
                  </div>
                </div>

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

Component.ts

this.selectieForm = new FormGroup({
      identificatieBrin: new FormControl(""),
      identificatieVestiging: new FormControl(""),
      identificatieSelectieSignals: new FormControl(""),
      identificatieSelectieJaar: new FormControl(""),
      identificatieSelectieSoort: new FormControl("")
    });

Изображение

Когда я выбираю раскрывающийся список «выбрать сигнал или любой», он пуст, когда я его удаляю, тогда он заполняется данными

Answer 1

Сначала вам нужно установить начальное значение в вашей реактивной форме, как показано ниже:

import {FormBuilder, FormGroup} из '@ angular / forms';

@ Component({selector: 'my-app', ...}) класс экспорта AppComponent реализует OnInit {

registerForm: FormGroup;

конструктор (приватный formBuilder: FormBuilder) {}

ngOnInit () {this.registerForm = this.formBuilder.group ({

  firstname: '',
  lastname: '',
  address: this.formBuilder.group({
    street: '',
    zip: '',
    city: ''
  })
});   

}}

. Пожалуйста, перейдите по ссылке на статью ниже. Это действительно полезно понятькак вы можете обрабатывать данные в вашей реактивной форме. Я прошел через это правильно, и это устраняет все мои сомнения, связанные с реактивной формой.

Вот ссылка ниже https://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html.

Answer 2

Вы можете использовать выбранный атрибут условно. Выбрано значение true, если значение formcontrolname пусто. Вот пример для «сигнала выбора»

<select id="signalType" class="input_control input_control--m  input_control--select" formControlName="identificatieSelectieSignals">
              <option [selected]="!selectieForm.value.identificatieSelectieSignals" value="null" hidden>Choose Signal </option>
              <option *ngFor="let signal of signals" [value]="signal">{{signal.label}}</option>
            </select>

Answer 3

Вам нужно будет установить начальное значение этих выпадающих меню как неопределенное / нулевое.

Примерно так:

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  selectieForm: FormGroup;
  signals = [
    { label: 'Signal 1' },
    ...
  ];
  jaren = [
    { label: 'Jaren 1' },
    ...
  ];
  types = [
    { label: 'Type 1' },
    ...
  ];

  ngOnInit() {
    this.selectieForm = new FormGroup({
      identificatieBrin: new FormControl(""),
      identificatieVestiging: new FormControl(""),

      // Something like this:
      identificatieSelectieSignals: new FormControl(),
      identificatieSelectieJaar: new FormControl(),
      identificatieSelectieSoort: new FormControl()
    });
  }

}

А затем в вашем шаблоне также указать value метки-заполнителя option тегов как null, что-то вроде этого:

<form [formGroup]="selectieForm">
  <div class="row">
    <div class="col-md-12">
      <div class="content-background">
        <div class="content">

          <div class="row">

           ...

            <div class="col-md-3">
              <div class="inpu">
                <select id="signalType" class="input_control input_control--m  input_control--select" formControlName="identificatieSelectieSignals">
                  <option value="null" disabled hidden>Choose Signal </option>
                  <option *ngFor="let signal of signals" [value]="signal">{{signal.label}}</option>
                </select>
              </div>
            </div>

            <div class="col-md-2">
              <div class="input">
                <select id="jaar" class="input_control input_control--m  input_control--select " formControlName="identificatieSelectieJaar">
                  <option value="null" disabled hidden>Choose BeKostiging Jaar </option>
                  <option [value]="jaar" *ngFor="let jaar of jaren">{{jaar.label}}</option>
                </select>
              </div>
            </div>

            <div class="col-md-2">
              <div class="input">
                <select class="input_control input_control--m  input_control--select" formControlName="identificatieSelectieSoort">
                  <option value="null" disabled hidden>Choose Teldatum Soort </option>
                  <option [value]="type" *ngFor="let type of types">{{type.label}}</option>
                </select>
              </div>
            </div>

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

---

Вот Рабочий образец StackBlitz дляВаш реф.