Question

我尝试使用反应性表单组来创建输入框的formcontrol cosnit并选择标签ropdown值。但是，当我打开屏幕时，下拉框为空，当我单击它时，它就会充满数据。

我想在打开屏幕时显示占位符值，用户可以下拉菜单选择选项值。

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

您必须将这些下拉菜单的初始值设置为undefined / null。

类似这样的东西：

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>

这是您推荐的Working Sample StackBlitz。

Answer 2

您需要像下面这样先以反应形式设置初始值

从'@ angular / forms'导入{FormBuilder，FormGroup};

@Component（{选择器：'my-app'，...}）导出类AppComponent   实现OnInit {

registerForm：FormGroup；

constructor（private 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 3

您可以有条件地使用selected属性。当formcontrolname值为空时，selected为true。以下是“选择信号”的示例

<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>

Angular-反应性表单选择输入框-下拉选项问题

3 个答案: