Revision history [back]

To set an initial value for number controls in Angular 14 typed forms, you can do the following steps:

1. In your component file, initialize the form group and controls:

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

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {

  myForm: FormGroup;

  ngOnInit() {
    this.myForm = new FormGroup({
      myNumberControl: new FormControl()
    });
  }

}

1. Set the initial value for the number control in the form group:

ngOnInit() {
  this.myForm = new FormGroup({
    myNumberControl: new FormControl(42)
  });
}

Note: Replace 42 with the desired initial value for your number control.

1. Bind the form group to your template and the number control to an input element:

<form [formGroup]="myForm">
  <input type="number" formControlName="myNumberControl">
</form>

That's it! The number control will now have an initial value of 42, and you can change it using the input element.