angular formcontrol type does not match the interface?

Question

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { FormGroup, FormControl, Validators } from '@angular/forms';

export interface PaymentFormGroup {
  amount: FormControl<number>;
  reason: FormControl<string>;
  addQr: FormControl<boolean>;
}

@Component({
  selector: 'app-pay',
  templateUrl: './pay.component.html',
  styleUrls: ['./pay.component.scss'],
})
export class PayComponent implements OnInit {
  protected isChecked: boolean = false;
  protected paymentFormGroup: FormGroup<PaymentFormGroup>;

  constructor(private _modalCtrl: ModalController) {}

  ngOnInit() {
    this.paymentFormGroup = new FormGroup<PaymentFormGroup>({
      amount: new FormControl<number>(0 as number, [Validators.required]),
      reason: new FormControl<string>('', [Validators.required]),
      addQr: new FormControl<boolean>(this.isChecked),
    });
  }

  protected cancel(): void {
    this._modalCtrl.dismiss(null, 'cancel');
  }

  protected confirm(): void {
    this._modalCtrl.dismiss(null, 'confirm');
  }
}

this is the error message: TS2322: Type 'FormControl<boolean | null>' is not assignable to type 'FormControl'.   Type 'boolean | null' is not assignable to type 'boolean'.     Type 'null' is not assignable to type 'boolean'.

how is that possible since there are default values and also some required validators?

Answer 1

form controls do not have generic types that you can assign like you've done with FormControl, FormControl, and FormControl. Instead, they always use the any type

export interface PaymentFormGroup {
  amount: FormControl;
  reason: FormControl;
  addQr: FormControl;
}
this.paymentFormGroup = new FormGroup({
  amount: new FormControl(0, [Validators.required]),
  reason: new FormControl('', [Validators.required]),
  addQr: new FormControl(this.isChecked),
});