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

如何解决Angular - 添加 formControlName 会使默认值在我的选择下拉列表中消失

我的 select 元素有问题，当我添加 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]],//...

我错过了什么吗？

解决方法

使用具有任何默认值的 [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)
})

,

尝试从值中删除方括号。

如果这不起作用，请创建一个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>

,

试试这个

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

,

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

--选择事件类型--

并且，当创建表单时

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

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