Angular typed controls No seeing types

Question

I am working updating some legacy forms to be more strongly typed and thus fix eslint errors. I keep running into issues where the .value operator on abstract controls throws an IDE error "Unsafe member access .value on an any value." which violates my projects no-unsafe-member-access. For example:

// strong typing from the start
interface sampleForm {
   account_1: FormControl<string>;
   account_2: FormControl<string>;
};

// Form builder
this.myForm: sampleForm = this.formBuilder.group({
   account_1: new FormControl<string|null>("placeholder", [Validators.maxLength(128),]),
   accounte_2: new FormControl<string|null>("", [Validators.maxLength(128),]),
});

// the problem, "Unsafe assignment of an `any` value", "Unsafe member access .value on an `any` value."
const t = this.myForm.controls[`account_${1}].value;

I have tried using controls.controlName.getRawValue(), controls.get(controlName), controls.controlName.value as string, let t = controls.controlName as AbstractControl; t = t.value as string; All throw the same warning.

Answer 1

Try:

const t = (this.myForm.controls[`account_${1}`] as FormControl<string>).value;

Using type assertion (this.myForm.controls[account_${1}] as FormControl), TypeScript knows that control is indeed of type FormControl, so accessing its value property is safe.