Angular form disable control on valueChanges

Question

I am trying to disable a form control when one of my form group value changes but the problem is that the method disable() and enable() also updates the form status, so I have an infinite loop.

@Component({
  selector: 'my-app',
  template: `
   <form [formGroup]="questionForm">

     <input type="text" formControlName="question" />

     <input type="text" formControlName="other"/>
   </form>
  `,
})
export class App {

  constructor(private fb: FormBuilder) {  
     this.questionForm = this.fb.group({
       question: [''],
       other: ['']
     });
  }

  ngOnInit() {
     this.questionForm.valueChanges.subscribe(v => {
       if(v.question === 'test') {
         this.questionForm.get('other').disable();
       } else {
          ...enable()
       }
     })
  }

}

How can I solve this problem?

AVJT82 · Accepted Answer · 2017-04-19 07:55:00Z

Well, according to the official docs you could use an directive for custom validation, this could of course in your case could be applied with logic of checking what the user has input and then disable and enable the other field. There's quite a lot of code there, sooooo...

...You could also do a smaller hack if you do not want all that bunch of code. Let's call a function that checks what user has typed. We also need to bind this, so we can refer to the questionForm:

 this.questionForm = this.fb.group({
   question: ['', [this.checkString.bind(this)]],
   other: ['']
 });

Then the function:

checkString(control: FormControl) {
  if(control.value == 'test') {
    this.questionForm.get('other').disable()
  }
  // we need to check that questionForm is not undefined (it will be on first check when component is initialized)
  else if (this.questionForm) { 
    this.questionForm.get('other').enable()
  }
}

This seems to serve it's purpose.

Demo

Hope this helps! :)

Jonathan Walton · Accepted Answer · 2017-04-18 18:39:20Z

0

I would first add a property isDisabled to your component, then I would use the [disabled] directive. This would solve your looping issue.

@Component({
    selector: 'my-app',
    template: `
<form [formGroup]="questionForm">

    <input type="text" formControlName="question" />

    <input type="text" formControlName="other" [disabled]="isDisabled" />
</form>
`,
})
export class App {

    isDisabled = false;

    constructor(private fb: FormBuilder) {
        this.questionForm = this.fb.group({
            question: [''],
            other: ['']
        });
    }

    ngOnInit() {
        this.questionForm.valueChanges.subscribe(v => {
            if (v.question === 'test') {
                this.isDisabled = true;
            } else {
                this.isDisabled = false;
            }
        })
    }

}

answered Apr 18, 2017 at 18:39

Jonathan Walton

4493 silver badges19 bronze badges

2 Comments

undefined Over a year ago

@AJT_82 is right, I think it's only from Angular version 4, but this is a wrong answer.

Jonathan Walton Over a year ago

You are absolutely right about the reactive forms. I am adding another answer, its a bit of a hack but hopefully it will help.

DeborahK · Accepted Answer · 2017-04-18 19:31:00Z

0

With reactive forms, you do it something like this:

question: {value: '', disabled: true }

answered Apr 18, 2017 at 19:31

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

3 Comments

ng2user Over a year ago

This is not dynamic.

DeborahK Over a year ago

@ng2user ?? I don't understand your comment?

undefined Over a year ago

You can change the value dynamically

Jonathan Walton · Accepted Answer · 2017-04-18 20:06:19Z

Adding another answer to work around the reactive forms issue using two controls and an *ngIf directive. See https://github.com/angular/angular/issues/11324.

This solution may not be ideal as it requires that you add a second form control that will appear when the conditions for changing the isDisabled property are met. This means there are two controls to manage when submitting the form.

@Component({
    selector: 'my-app',
    template: `
<form [formGroup]="questionForm">

    <input type="text" formControlName="question" />

    <input *ngIf="isDisabled" type="text" formControlName="other" disabled />
    <input *ngIf="!isDisabled" type="text" formControlName="other2"  />
</form>
    `
    providers: [FormBuilder]
})
export class App {

    isDisabled = true;

    constructor(private fb: FormBuilder) {
        this.questionForm = this.fb.group({
            question: [''],
            other: [''],
            other2: ['']
        });
    }

    ngOnInit() {
        this.questionForm.valueChanges.subscribe(v => {
            if(v.question === 'test') { 
                this.isDisabled = false;
            } else {
                this.isDisabled = true;
            }
        });
    }

}

Check out or play with the plunker if you wish:

https://plnkr.co/edit/0NMDBCifFjI2SDX9rwcA

tha · Accepted Answer · 2023-06-25 08:10:13Z

0

For future users:

Just add { emitEvent: false } in your code like this

this.questionForm.get('other').disable({ emitEvent: false });

answered Jun 25, 2023 at 8:10

tha

562 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular form disable control on valueChanges

5 Answers 5

Demo

Comments

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related