CODEWITHSUNDEEP
javascriptangularangularjs-directive
Ramana
Ramana

Reputation: 1935

Angular 9: disabled attribute different behavior in chrome and IE 11

I had a simple template with a fromGroup and bunch of form controls, and I'm trying to enable a button if the form is valid.

.ts:

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  formGroup: FormGroup;
  constructor(public formBuilder: FormBuilder) {
  }
  ngOnInit(): void {
    this.formGroup = this.formBuilder.group({
      firstName: ['', Validators.minLength(3)],
      lastName: ['', Validators.minLength(5)]
    });
  }
}

.html:

<form [formGroup]="formGroup">
  <div>
    <span>Name</span>
    <input type="text" formControlName="firstName">
  </div>
  <div>
    <span>Name</span>
    <input type="text" formControlName="lastName">
  </div>
  <div>
    <span>Test</span>
    <input [disabled]="!formGroup.valid" type="text">
  </div>
</form>

from the above example, the expectation is by default the button should be disabled and once the form is valid I should be able to see the button enabled, and in chrome it is working as expected but not in IE 11 (no errors in the console), looked at few solutions but that hasn't fixed my error, any suggestions ??

Upvotes: 1

Views: 573

Answers (1)

Ramana
Ramana

Reputation: 1935

Found the solution ChangeDetectorRef.detectChanges(); fixed my issue.

this.formGroup.valueChanges.subscribe(() => {
 this.changeRef.detectChanges();
});

Upvotes: 1

Related Questions