How to disable FormControl in Reactive Form Angular?

Question

How to disable this formControl:

this.step1 = this.fb.group({
      'name': ['', [Validators.required, Validators.minLength(1), Validators.maxLength(50)], disabled: true]...

I tried to add:

disabled: true

user4676340 · Accepted Answer · 2018-08-14 07:13:12Z

3

I'm not sure this works

'name': [{
  value: '',
  disabled: true
}, [Validators.required, Validators.minLength(1), Validators.maxLength(50)], disabled: true]

But I am sure this does

'name': new FormControl([{
  value: '',
  disabled: true,
  validators: [Validators.required, Validators.minLength(1), Validators.maxLength(50)], disabled: true]
})

answered Aug 14, 2018 at 7:13

user4676340

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

Comments

PeS · Accepted Answer · 2018-08-14 07:21:09Z

1

You must add that to formState - 1st parameter of fb.control:

this.step1 = this.fb.group({
  'name': this.fb.control({value: '', disabled: true}, [Validators.required, Validators.minLength(1), Validators.maxLength(50)])
});

answered Aug 14, 2018 at 7:21

PeS

4,0474 gold badges46 silver badges57 bronze badges

Comments

Krishna Rathore · Accepted Answer · 2018-08-14 07:16:32Z

1

use disabled:true for this.

this.step1 = this.fb.group({
      name: [{value:'name',disabled:true}, [Validators.required, Validators.minLength(1), Validators.maxLength(50)]],
      lastname: [{value:'last name',disabled:true}, [Validators.required, Validators.minLength(1), Validators.maxLength(50)]]
})

answered Aug 14, 2018 at 7:16

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to disable FormControl in Reactive Form Angular?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related