Angular 2 FormBuilder deshabilita los campos al seleccionar la casilla de verificación

El paso a paso o código que verás en este post es la resolución más fácil y efectiva que encontramos a esta duda o problema.

Solución:

Al principio, creo que quieres permitir campos si y solo si isResetPasswordcaja está seleccionado, ¿verdad? Si es así, aquí vamos:

1 – La construcción del formulario debería ser así:

this.userProfileForm = this.formBuilder.group(
  // ...
  password: [
    value: null,
    disabled: !this.isResetPassword
  ],
  newPassword: [
    value: null,
    disabled: !this.isResetPassword
  ],
  reTypePassword: [
    value: null,
    disabled: !this.isResetPassword
  ]
);

Tenga en cuenta que aquí estoy deshabilitando entradas solo cuando this.isResetPassword es false.

2 – Para detectar cambios en su , puedes usar cualquiera (change) en plantilla:

  
   'USER_PROFILE_MODEL.RESET_PASSWORD' 

… o incluso, en componente, utilizando valueChanges:

this.userProfileForm.get('isResetPassword').valueChanges.subscribe(value => this.handleChange(value));

Y, por supuesto, aquí está el function manipular el estado de los campos.

handleChange(value: boolean): void 
  const passwordCtrl = this.userProfileForm.get('password');
  const newPasswordCtrl = this.userProfileForm.get('newPassword');
  const reTypePasswordCtrl = this.userProfileForm.get('reTypePassword');

  if (value) 
    passwordCtrl.enable();
    newPasswordCtrl.enable();
    reTypePasswordCtrl.enable();
   else 
    passwordCtrl.disable();
    newPasswordCtrl.disable();
    reTypePasswordCtrl.disable();
  

Algunos consejos:

1 – Aunque es solo una cuestión de preferencia, vale la pena mencionar que no es necesario utilizar [formControl] como esto:

[formControl]="userProfileForm.controls['isResetPassword']"

En su lugar, simplemente puede usar formControlName:

formControlName="isResetPassword"

Tenga en cuenta que puede hacer lo mismo con todos sus control S.

2 – No es necesario pasar el valor de forma en (ngSubmit) ya que tienes la referencia de userProfileForm en form.

En vez de:

(ngSubmit)="submitForm(userProfileForm.value)"

submitForm(value: any)  console.log(value); 

Esta:

(ngSubmit)="submitForm()"

submitForm()  console.log(this.userProfileForm.value); 

3 – Si quieres ver el value de entradas deshabilitadas, en lugar de .value, Deberías usar .getRawValue(), como esto:

this.userProfileForm.getRawValue();

DEMO (usando (change))

DEMO (usando valueChanges)

La forma más sencilla sería crear un grupo de formularios solo para las contraseñas:

this.userProfileForm = formBuilder.group(
  'userName': [null, [Validators.required]],
  'displayName': [null],
  'email': [null, [Validators.required]],
  password: formBuilder.group(
    'isResetPassword': this.isResetPassword,
    'password': [null],
    'newPassword': [null],
    'reTypePassword': [null]
  )
)

Luego, en su plantilla, cambie la columna de contraseñas a esto:

    
        
       'USER_PROFILE_MODEL.RESET_PASSWORD' 
    
  
  

     translate 
    
  
  

     'USER_PROFILE_MODEL.NEW_PASSWORD' 
    
  
  

     translate