angular - Angular 形式控件类型中的枚举？

Question

我在表单类型中使用枚举时遇到问题。

以下代码:

export enum Frequency {
  DAILY = 'DAILY',
  WEEKLY = 'WEEKLY',
  MONTHLY = 'MONTHLY',
  QUARTERLY = 'QUARTERLY',
  HALF_YEARLY = 'HALF_YEARLY',
  YEARLY = 'YEARLY',
}

export type MyForm = FormGroup <{
  frequency: FormControl<Frequency>,
}>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;

  public form: MyForm = new FormGroup({
    frequency: new FormControl(Frequency.DAILY),
  })

}

给出错误:

Type 'FormGroup<{ frequency: FormControl<Frequency.DAILY>; }>' is not assignable to type 'MyForm'.
Type 'FormControl<Frequency>' is not assignable to type 'FormControl<Frequency.DAILY>'.
Type 'Frequency' is not assignable to type 'Frequency.DAILY'.

堆栈 Blitz : https://stackblitz.com/edit/angular-ivy-qsb4nb?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

Answer 1

通过从类型中删除 FormGroup 并将其移至 form 变量即可解决该问题，如下所示:

export type MyForm = {
  frequency: FormControl<Frequency>;
};

public form: FormGroup<MyForm> = new FormGroup<MyForm>({
  frequency: new FormControl(Frequency.DAILY),
});

返回的new FormGroup不需要输入为formGroup，因为它已经定义为新的FormGroup，您只需需要输入其控件。

这是 stackblitz 上的一个工作示例.