formGroup disable()/enable() does not work right after init

I'm submitting a...


[x] Bug report

Current behavior

I you create a formGroup using formBuilder.group() and call formGroup.disable() or formGroup.enable() right after initialization then it doesn't work.
If you call it using button or setTimeout() then it works.

Expected behavior

Would be nice to be able to disable/enable form right after creation.

Minimal reproduction of the problem with instructions

View: https://ng-form-disable-after-init.stackblitz.io
Edit: https://stackblitz.com/edit/ng-form-disable-after-init

Environment

Angular version: 5.2.7

Could you explain the steps to reproduce, I don't see anything wrong in your stack blitz

Click on "Disable with init" button. It will not disable the form. Or click any other "Disable" and than "Enable with init".

I am having the same issue, here is a summary of my setup:

component.ts

ngOnInit() {
  this.disabledGroup = new FormGroup({});
  this.disabledGroup.disable();
}

component.html

<pre>{{ disabledGroup.disabled }}</pre> <!-- prints: false -->

Changing this.disabledGroup.disable() to setTimeout(() => this.disabledGroup.disable()); works as expected.

ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
Angular CLI: 6.0.3

Node: 8.11.2

OS: darwin x64

Angular: 6.0.2

... animations, common, compiler, compiler-cli, core, forms

... http, language-service, platform-browser

... platform-browser-dynamic, router
Package                            Version
@angular-devkit/architect          0.6.1

@angular-devkit/build-angular      0.6.1

@angular-devkit/build-ng-packagr   0.6.3

@angular-devkit/build-optimizer    0.6.1

@angular-devkit/core               0.6.1

@angular-devkit/schematics         0.6.3

@angular/cli                       6.0.3

@ngtools/json-schema               1.1.0

@ngtools/webpack                   6.0.1

@schematics/angular                0.6.3

@schematics/update                 0.6.3

ng-packagr                         3.0.0-rc.5

rxjs                               6.1.0

typescript                         2.7.2

webpack                            4.6.0

I Have the same issue, you can find a minimal working example here

Environment
Angular version: 6.1.0

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { PersonService } from './person.service';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `  
        <form [formGroup]="form">    
        <button class="btn btn-primary" (click)="onFetchPerson()">Click Me</button>                
            <div class="form-group">
                <label>First Name</label>
                <input type="text" class="form-control" formControlName="firstName" />
            </div>
            <div class="form-group">
                <label>Surname</label>
                <input type="text" class="form-control" formControlName="surname" />
            </div>
            <div class="form-group">                
                Disabled:{{form.disabled}}<br>
                Status:{{form.status}}
            </div>
        </form>
    `,
})
export class App implements OnInit {  
  public form: FormGroup;

  constructor(private personService: PersonService) {}

  ngOnInit(): void {
    this.form = new FormGroup({     
      firstName: new FormControl(),
      surname: new FormControl(),
    });
  }

  public onFetchPerson() {
    this.personService.fetchPerson().subscribe(() => {
      this.form = new FormGroup({        
        firstName: new FormControl('John'),
        surname: new FormControl('Doe'),
      });
      this.form.disable();
      console.log(this.form);
    });
  }
}

@Injectable({
  providedIn: 'root',
})
export class PersonService {
  constructor(private http: HttpClient) {}

  public fetchPerson = () => this.http.get('https://randomuser.me/api');
}

@NgModule({
    imports: [BrowserModule, HttpClientModule, ReactiveFormsModule],
    declarations: [App],
    bootstrap: [App],
    providers: [
        PersonService
    ]
})
export class AppModule {}

This simple directive works for me:

import { Directive, DoCheck } from "@angular/core";
import { NgControl } from "@angular/forms";

@Directive({
    selector: '[formControlName]'
})
export class FixToggleDisableFormControlDirective implements DoCheck {
    private _enabled: boolean;

    constructor(private _ngControl: NgControl) { 
        this._enabled = this._ngControl.control.enabled;
    }

    ngDoCheck() {
        if (this._ngControl.control.enabled != this._enabled) {
            if (this._ngControl.control.enabled && !this._enabled) {
                this._ngControl.control.enable();
            }
            else if (!this._ngControl.control.enabled && this._enabled) {
                this._ngControl.control.disable();
            }
            this._enabled = this._ngControl.control.enabled; 
        }
    }
}

Tested on Angular@6.0.5

UPDATE: Fix calling enable/disable loop

I'm experiencing the same issue. Nothing new about it?

Same issue on the latest version.
Damn guys, I was literally going crazy to find what was happening

I am as well: I have a class that extends FormGroup, where in the constructor it just calls super({...}) to populate the form, then calls disable().

If I dispatch a new instance of this object to the state, the form in the UI does not render as I'd expect (if the old form was enabled, the fields will still be enabled).

If I wrap the .disable() line in a setTimeout(), then it works as you'd expect.

The warehouse is the root for a whole structure, there might be something down the line that updates value/validity, but nothing, I repeat, nothing, touches the warehouse itself.
How is that even possible?
Why is "enabled/disabled" even related to status? (valid beats disabled, so my money is on a validator that "enables" its control and it propagates it up... because that was obviously my intention when I added some validator somewhere... to enable the whole form... ).

PS: my issue wasn't solvable by timeouts.

fix(forms): not picking up disabled state if group is swapped out and…

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

formGroup disable()/enable() does not work right after init #22556

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

Environment

Package Version

38 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

formGroup disable()/enable() does not work right after init #22556

Description

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

Environment

Activity

Toxicable commented on Mar 3, 2018

ctrl-brk commented on Mar 3, 2018

danguilherme commented on Jun 1, 2018

Package Version

tjaartvanderWalt commented on Sep 7, 2018

Dead96 commented on Sep 11, 2018

giovannipds commented on Dec 18, 2018

lppedd commented on Jan 21, 2019

JohnYoungers commented on Jan 28, 2019

38 remaining items

GonziHere commented on Apr 28, 2021

angular-automatic-lock-bot commented on Apr 28, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions