Angular 反应式表单 - 禁用所需的表单控件使表单有效，即使没有给出值

Question

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

• Instead of disabling independent form controls, if we disable the complete form using this.loginForm.disable(); , the form will stay in invalid state as per my requirement, but this will not be changed to valid if we update the value in form.
• Also if I disable the third input age along with the 2 inputs email and password , the form will stay invalid, but this will not be changed to valid if we update the value in form.
• Also if did not have the third field age and I made 2 inputs email and password disabled, the form will stay invalid, but still this will not be changed to valid if we update the value in form.

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

Answer 1

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');
  }