Angular - Set Default Value For Input Type Number In Form Control

Question

I am trying to set the input type number's default (initial) value as 1 but is having a difficult time figuring out how to do it. I know that I can set the value with value="1" if there is no formControlName. I tried inputNum: new FormControl(1, [Validators.required, Validators.pattern('^[1-9]\\d*$')])

and

inputNum: new FormControl([1, Validators.required, Validators.pattern('^[1-9]\\d*$')]) without success.

The input should have the initial value of 1 but I should be able to set it as 1 to whatever positive whole number.

 <input formControlName="inputNum" class="form-control" [ngClass]="{'is-invalid':inputNumForm.touched && inputNumForm.errors}" type="number">
    <div class="invalid-feedback" *ngIf="inputNumForm.touched && inputNumForm.errors">
       <label *ngIf="inputNumForm.errors.required">Numbers Only</label>
    </div>

  public form = new FormGroup({
    inputNum: new FormControl('', [Validators.required, Validators.pattern('^[1-9]\\d*$')]),
  });

  get inputNumForm(): FormControl {
    return this.form.controls['inputNum'] as FormControl;
  }

this.form.setValue(YOUR_VALUE) or you can do it directly on the element as there is a value property, check: angular.io/api/forms/AbstractControl#setValue — Bargros
– Bargros, Commented Jul 18, 2019 at 9:08
@Bargros I totally over complicated the problem and missed this. Thank you. — user9553525
– user9553525, Commented Jul 18, 2019 at 9:13
@user9553525 check this demo stackblitz.com/edit/angular-p9lgax — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Jul 18, 2019 at 10:03

Sourav Golui · Accepted Answer · 2019-07-18 09:31:56Z

1

 public form = new FormGroup({
    inputNum: new FormControl('1', [Validators.required, Validators.pattern('^[1-9]\\d*$')]),
 });

answered Jul 18, 2019 at 9:31

Sourav Golui

6331 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chanaka Weerasinghe · Accepted Answer · 2019-07-18 09:04:22Z

0

Here is the Working Example check out

<input text validateDecimalOnType='false' id='numeric' value='1'  />

answered Jul 18, 2019 at 9:04

Chanaka Weerasinghe

5,8002 gold badges31 silver badges42 bronze badges

Collectives™ on Stack Overflow

Angular - Set Default Value For Input Type Number In Form Control

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related