RC6 Forms: Calling disabled() on FormControl makes entire form invalid

I’m submitting a … (check one with “x”)

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior If I call this.myForm.controls["code"].disable();, this.myForm.valid is always false:

this.myForm.patchValue({code: 17});
console.log(this.myForm.valid);
this.myForm.controls["code"].disable();
console.log(this.myForm.valid);

This outputs

true
false

Expected/desired behavior The form should still be valid, even though the control has been disabled.

Reproduction of the problem http://plnkr.co/edit/B8cA0zzcrt4SjxrGMlRf?p=preview

• Angular version: 2.0.0-rc.6
• Browser: [Chrome 53.0.2785.92 | Firefox 48 ]
• Language: [TypeScript 1.8]
• Remarks

I initially remarked this as a comment in #11271, but I don’t want to hijack the other issue, which is about dynamically binding [disabled]. It could be that PR #11257 fixes this already, but I am not sure, so I decided to file this bug-report.

[unsafecode]

I’ve just stubbed this custom directive, which should behave as desidered. Warning: it’s just a proof-of-concept, not a complete solution. Feedbacks are welcome, of course.

@Directive({
  selector: '[formControlName][dynamicDisable]'
})
export class DynamicDisable implements OnInit, OnChanges {
  constructor(
    @Optional() @Host() @SkipSelf() private parent: ControlContainer,
  ) { 

  }

  @Input() formControlName: string;  
  @Input() dynamicDisable: boolean;

  private ctrl: AbstractControl;

  ngOnInit() { 
    if(this.parent && this.parent["form"]) {
      this.ctrl = (<FormGroup>this.parent["form"]).get(this.formControlName);
    }
  }

  ngOnChanges() {
    if (!this.ctrl) return;

    if (this.dynamicDisable) {
      this.ctrl.disable();
    }
    else {
      this.ctrl.enable();
    }
  }
}

<form [formGroup]="form">
    <label>
        Make required
        <input type="checkbox" formControlName="isRequired" [(ngModel)]="isRequired" />
    </label>
    <p>
        <input type="text" formControlName="yourName" [(ngModel)]="yourName" [dynamicDisable]="!isRequired" />
    </p>
    <p>
        Valid: {{form.valid}}
    </p>
</form>

@Component({
  selector: 'home',
  styleUrls: ['./home.css'],
  templateUrl: './home.html'
})
export class Home {

  form: FormGroup;
  isRequired: boolean = true;
  yourName: string = '';

  ngOnInit() {
    this.form = new FormGroup({
      "isRequired": new FormControl(true),
      "yourName": new FormControl('', [])
    });

[kara]

[copied from #11257]

@capi The way the model works is that a parent form group is disabled if all its child controls are disabled. The status of group controls is always calculated as a reduction of the child controls.

In your example, your form only has one form control. Once you disable it, you are effectively disabling the whole form because all its (one) children are disabled. If you log the status of the form, you’ll see that its status is ‘DISABLED’, which is why valid is false. The statuses are mutually exclusive. Closing, as this works as designed.