typescript 创建类型化React式窗体时的类型Map问题

iyfjxgzm  于 2022-11-26  发布在  TypeScript
关注(0)|答案(1)|浏览(152)

在Angular中设置一个类型化的FormGroupMap器,以便在我们迁移到使用类型化表单时创建类型化的FormGroup时保存一些冗余的类型化操作,并且在我向表单模型添加boolean之前,它似乎一直有效。

export type FormGroupMap<T> = {
  [key in keyof T]: FormControl<T[keyof T]>;
};

一旦你添加了isActive模型,它就会显示这个错误,但是当属性都是字符串的时候,它就会工作。
在src/app/app.component.ts(30:5)中出现错误,请键入“表单组〈{名字:窗体控件;最后一个名称:表单控件; isActive:表单控件;“}〉"不能赋给类型”ExampleFormGroup“。请键入”FormControl| boolean〉"不能赋给类型“FormControl”。类型“string| boolean'无法指派给型别' string '。型别'boolean'无法指派给型别' string '。
StackBlitz的示例代码:

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

export interface ExampleModel {
  firstName: string;
  lastName: string;
  isActive: boolean;
}

export type FormGroupMap<T> = {
  [key in keyof T]: FormControl<T[keyof T]>;
};

export type ExampleFormGroup = FormGroup<FormGroupMap<ExampleModel>>;

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

  public constructor(private fb: NonNullableFormBuilder) {
    this.form = this.createFormInstance();
  }

  private createFormInstance(): ExampleFormGroup {
    return this.fb.group({
      firstName: ['', []],
      lastName: ['', []],
      isActive: [false, []],
    });
  }
}
xyhw6mcr

xyhw6mcr1#

我决定避免使用类型Map,直到我们看到Angular团队做了什么来帮助处理类型。我可能会使用ngx-mf,但现在显式定义类型是有效的。

export type ExampleFormGroup = FormGroup<{
  firstName: FormControl<string>;
  lastName: FormControl<string>;
  isActive: FormControl<boolean>;
}>;

相关问题