Angular: TS2322: Type 'number' is not assignable to type 'string'

Question

Hi have the following bellow code in my angular application. When I try run my production build command I get the following error:

Error TS2322: Type 'number' is not assignable to type 'string'.

I have tried changing to:

[value]="'1'"

however if I do this it won't check the box

          <label mdbLabel class="form-label mt-3 mb-0">Time Units </label>
          <mdb-form-control>
            <div class="form-check form-check-inline">
              <input
                mdbRadio
                class="form-check-input"
                type="radio"
                mdbInput formControlName="timeUnitHHMM"
                id="timeUnitHHMM"
                [value]="1"
                [checked]="validationForm.getRawValue()?.timeUnitHHMM == 1"
              />
              <label class="form-check-label" for="timeUnitHHMM">HHMM</label>
            </div>

    this.validationForm = new FormGroup({
      timeUnitHHMM: new FormControl(1),
    });

    // @ts-ignore
    this.validationForm.get('timeUnitHHMM').valueChanges.subscribe(value => {
      if (value === 1) {
        this.validationForm.patchValue({timeUnitDecimal: 0});

      }
    });

Wondering if anyone has any solution.

Thanks

Answer 1

[value]="1" define string-binding. So 1 comes as a string.

If you want to transfer the 1 as a number, the simplest way is to force the cast from string to number with a + infront of the 1

[value]="+1"

However, I recommend that you take a look at the angular data bindings. Under the following link you will find the official documentation:

Data-binding