CODEWITHSUNDEEP
javascriptangularforms
Nitheesh
Nitheesh

Reputation: 20006

Angular reactive form - Disabling a required form control makes the form valid even if no value is given

I have created an angular reactive form like below

component.html

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <h5 class="card-title text-center">Login</h5>
  <div class="form-group">
    <label class="text-success" for="exampleInputEmail1"
      >Email address</label
    >
    <input
      type="email"
      class="form-control"
      id="exampleInputEmail1"
      aria-describedby="emailHelp"
      formControlName="email"
      placeholder="Enter email"
    />
  </div>
  <div class="form-group">
    <label class="text-danger" for="exampleInputPassword1"
      >Password</label
    >
    <input
      type="password"
      class="form-control"
      id="exampleInputPassword1"
      formControlName="password"
      placeholder="Password"
    />
  </div>
  <button type="submit" class="btn btn-primary">Login</button>
</form>

component.ts

constructor(private fb: FormBuilder) {}

public loginForm: FormGroup;

ngOnInit(): void {
  this.initializeForm();
}

initializeForm = () => {
  this.loginForm = this.fb.group({
    age: [''],
    email: ['', [Validators.required]],
    password: ['', [Validators.required]],
  });
  this.loginForm.controls.email.disable();
  this.loginForm.controls.password.disable();
}

onSubmit() {
  if (this.loginForm.valid) {
    console.log('Login form - valid');
  } else {
    console.log('Login form - invalid');
  }
}

Fiddle having the problem

As you can see I have 3 form control fields inside the form group, email, password and age. age is a hidden field, I will update this from my script based on some logic.

I have made my email and password disabled using this.loginForm.controls.email.disable(); and this.loginForm.controls.password.disable(); during the initialization process itself. I will enable them depending on some logic later.

As of now I have 2 required form controls disabled and have not initialized with any value. Ideally this form is not valid. But when I try to log the form valid status in the console from the form submit function, it logs the valid status as true.

Why is this so?

Some other behaviors that I noticed are

Can someone say why the form is valid when some inputs are disabled?

Upvotes: 1

Views: 4722

Answers (1)

tufonas
tufonas

Reputation: 313

When you disable a form field (form control) it means that the control is exempt from validation checks and excluded from the aggregate value of any parent. Status will be DISABLED.

  • So in your project, when you disable email/password, and age is still there then your form will be valid cause age is valid.
  • In your first bullet, when you disable the whole form, you check if form is valid. Form is not valid nor invalid. Your form will have status DISABLED.
  • In the second bullet, if you disable all the fields of the form, then form will have status DISABLED again cause all fields have this status.
  • In the third bullet, both fields disabled means that your form will have DISABLED status.

In other words, checking for valid and invalid form is not correct. Try to use else if and add DISABLED check for better understanding.

  if (this.loginForm.valid) {
    console.log('Login form - valid');
  } else if (this.loginForm.invalid) {
    console.log('Login form - invalid');
  } else if (this.loginForm.disabled) {
    console.log('Login form - disabled');
  }

Upvotes: 6

Related Questions