Angular - 添加 formControlName 会使默认值在我的选择下拉列表中消失答案

【问题标题】：Angular - Adding formControlName makes the default value disappear in my select dropdownAngular - 添加 formControlName 会使默认值在我的选择下拉列表中消失
【发布时间】：2021-07-06 19:45:32
【问题描述】：

我的选择元素有问题，当我添加 formControlName 时，-- Select Event Type -- 不再显示（但仍在下拉列表中选中）。如果我删除它，它会显示但当然不会验证。

这家伙在这里有同样的问题，但答案对我不起作用：Adding formControlName makes the default value disappear in my form's dropdown in Angular

<select class="form-control" name="type" id="type" formControlName="type" [appValidatedInputControl]="form.get('type')">
    <option [value]="" disabled selected>-- Select Event Type --</option>
    <option *ngFor="let type of (eventTypes$ | async)" [value]="type">{{ 'eventType.' + type | translate}}</option>
</select>

TS 文件

export class EventCreationFormComponent implements OnInit {
  @Input() form: FormGroup;
  //...

表单被注入的父 HTML 组件：

<app-event-creation-form [form]="form"></app-event-creation-form>

父组件TS文件

export class EventCreationComponent implements OnInit, OnDestroy {
  form: FormGroup;
  //...

  constructor(private fb: FormBuilder){
     this.initForm();
     //...
  }

  initForm() {
    this.form = this.eventCreationService.createForm();
    const { type, tags } = this.form.controls;
    this.subs.sink = type.valueChanges.subscribe((typeValue) => {
      if (typeValue && (tags.untouched || !tags.value || !tags.value.length)) {
        tags.patchValue([{ value: typeValue, display: typeValue }]);
      }
    });

    //...
  }

EventCreationService：

@Injectable()
export class EventCreationService implements OnDestroy {

  constructor(private fb: FormBuilder) {}

  createForm(): FormGroup {
    return this.attachEventHandlers(this.fb.group(
      {
        type: [undefined, [Validators.required]],
        //...

我错过了什么吗？

【问题讨论】：

在这种情况下，在作为该表单控件来源的表单中设置默认值

标签： angular angular-forms

【解决方案1】：

将 [ngValue] 指令与任何默认值一起使用（此处使用 0）：

<select class="form-control" name="type" id="type" formControlName="type" [appValidatedInputControl]="form.get('type')">
    <option [ngValue]="0" disabled>-- Select Event Type --</option>
    <option *ngFor="let type of (eventTypes$ | async)" [ngValue]="type">{{ 'eventType.' + type | translate}}</option>
</select>

然后在你的组件中，（假设你的 FormGroup 被称为customForm）：

this.customForm = new FormGroup({
 type: new FormControl(0)
})

【讨论】：

不幸的是它不起作用。我已经更新了我的帖子。我想可能是因为我的表单继承自另一个父组件。你怎么看？

【解决方案2】：

尝试从值中删除方括号。

如果这不起作用，请创建一个 stackblitz 并尝试重新创建问题。

<select class="form-control" name="type" id="type" formControlName="type" [appValidatedInputControl]="form.get('type')">
    <option value="" disabled selected>-- Select Event Type --</option>
    <option *ngFor="let type of (eventTypes$ | async)" [value]="type">{{ 'eventType.' + type | translate}}</option>
</select>

【讨论】：

【解决方案3】：

试试这个

createForm(): FormGroup {
    return this.attachEventHandlers(this.fb.group(
      {
        type: new FormControl('-- Select Event Type --', Validators.required),
        //...

【讨论】：

【解决方案4】：

不使用'selected'来显示，--选择事件类型--，首先

--SelectEventType--

并且，当创建表单时

  this.fb.group(
  {
    type: [null, [Validators.required]],
    ...
  }

注意：我想您的 [appValidatedInputControl] 是验证控件的指令。当你使用 ReactiveForms 时，你应该使用 Validators 而不是指令。

【讨论】：