Angulaire 2 FormBuilder désactiver les champs de case à cocher sélectionner

J'ai construire angulaire de la cli de projet et d'avoir un formulaire avec des checkbox. Certains champs doivent désactiver sur la case à cocher sélectionner.

Forme est comme suit
Angulaire 2 FormBuilder désactiver les champs de case à cocher sélectionner

besoin de désactiver/activer le mot de passe, le nouveau mot de passe et le type champs de mot de passe sur la case à cocher sélectionner l'évènement.

Html

<form [formGroup]="userProfileForm" (ngSubmit)="submitForm(userProfileForm.value)">
<div class="row">
<div class="col">
<div class="form-group">
<label> {{ 'USER_PROFILE_MODEL.USER_NAME' | translate }}</label>
<input class="form-control" type="text" [formControl]="userProfileForm.controls['userName']">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.DISPLAY_NAME' | translate }}</label>
<input class="form-control" type="text" [formControl]="userProfileForm.controls['displayName']">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.EMAIL' | translate }}</label>
<input class="form-control" type="text" [formControl]="userProfileForm.controls['email']">
</div>
</div>
<div class="col">
<div class="form-group ">
<label class="checkbox-inline">
<input type="checkbox" value="isResetPassword" name="isResetPassword" [formControl]="userProfileForm.controls['isResetPassword']">  
{{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
</label>
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.PASSWORD' | translate }}</label>
<input class="form-control" type="password" [formControl]="userProfileForm.controls['password']">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.NEW_PASSWORD' | translate }}</label>
<input class="form-control" type="password" [formControl]="userProfileForm.controls['newPassword']">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.RE_TYPE_PASSWORD' | translate }}</label>
<input class="form-control" type="password" [formControl]="userProfileForm.controls['reTypePassword']">
</div>
</div>
</div>
</form>

ts code

this.isResetPassword = true;
this.userProfileForm = formBuilder.group({
'userName': [null, [Validators.required]],
'displayName': [null],
'email': [null, [Validators.required]],
'isResetPassword': this.isResetPassword,
'password': [{
value: null,
disabled: this.isResetPassword
}],
'newPassword': [{
value: null,
disabled: this.isResetPassword
}],
'reTypePassword': [{
value: null,
disabled: this.isResetPassword
}]
})

Forme est construite à l'intérieur du constructeur.
Comment puis-je désactiver/activer les champs ci-dessus sur la case à cocher sélectionner.

Selon les réponses ci-dessus, l'utilisation formControlName. Sur l'événement click sur la case d'appeler un gestionnaire d'événements dans laquelle bascule valeur de isResetPassword puis ajouter la déclaration ci-dessous. userProfileForm.updateValueAndValidity();

InformationsquelleAutor Janith Widarshana | 2017-07-07

Au premier abord, je crois que vous voulez permettre champs si et seulement si isResetPassword case est sélectionné, un clic droit? Si oui, nous y voilà:

1 - La construction de la forme devrait être comme ceci:

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

Notez qu'ici, je suis la désactivation des entrées uniquement lorsque this.isResetPassword est faux.

2 - Pour détecter les changements sur votre <input type="checkbox">, vous pouvez utiliser (change) dans modèle:

<label>
<input 
type="checkbox" 
[formControl]="userProfileForm.controls['isResetPassword']" 
(change)="handleChange($event)">
{{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
</label>

... ou même, dans composant, à l'aide de valueChanges:

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

Et, bien sûr, voici la function de manipuler l'état de champs.

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

Quelques conseils:

1 - Bien que c'est uniquement une question de préférence, il vaut la peine de mentionner que vous n'avez pas besoin d'utiliser [formControl] comme ceci:

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

Au lieu de cela, vous pouvez simplement utiliser formControlName:

formControlName="isResetPassword"

Notez que vous pouvez faire de même pour tous vos contrôles.

2 - Vous n'avez pas besoin de passer le forme de la valeur dans (ngSubmit), puisque vous avez déjà la référence de userProfileForm dans form.

Au lieu de:

(ngSubmit)="submitForm(userProfileForm.value)"
submitForm(value: any) { console.log(value); }

Ce:

(ngSubmit)="submitForm()"
submitForm() { console.log(this.userProfileForm.value); }

3 - Si vous voulez voir la value handicapées entrées, au lieu de .value, vous devez utiliser .getRawValue(), comme ceci:

this.userProfileForm.getRawValue();

DÉMONSTRATION (en utilisant (changer))

DÉMONSTRATION (en utilisant valueChanges)

InformationsquelleAutor developer033

La façon la plus simple serait de créer un groupe juste pour les mots de passe:

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]
})
})

Ensuite sur votre modèle de changer les mots de passe le col à ceci:

<div class="col" formGroupName="password>
<div class="form-group ">
<label class="checkbox-inline">
<input type="checkbox" formControlName="isResetPassword">  
{{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
</label>
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="password" >
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.NEW_PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="newPassword">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.RE_TYPE_PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="reTypePassword">
</div>
</div>

sur votre composant de:

//when value changes, to disable all the fields just do this
this.userProfileForm.controls.password.disable();
//to enable them back
this.userProfileForm.controls.password.enable();

InformationsquelleAutor Fabio Antunes

La plupart des méthodes sur ce post, mais vous devez le faire avec un setTimeout:

setTimeout(() => {
if (this.disable) {
this.userProfileForm.controls.password.disable();
}
else {
this.userProfileForm.controls.password.enable();
}
});

Ressemble Angulaire bug, problèmes ici et ici

InformationsquelleAutor ranbuch

Au lieu d'utiliser [formControl] pour vos contrôles dans le modèle, utilisez formControlName.

Votre forme va ressembler à ceci:

<form [formGroup]="userProfileForm" (ngSubmit)="submitForm(userProfileForm.value)">
<div class="row">
<div class="col">
<div class="form-group">
<label> {{ 'USER_PROFILE_MODEL.USER_NAME' | translate }}</label>
<input class="form-control" type="text" formControlName="userName">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.DISPLAY_NAME' | translate }}</label>
<input class="form-control" type="text" formControlName="displayName">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.EMAIL' | translate }}</label>
<input class="form-control" type="text" formControlName="email">
</div>
</div>
<div class="col">
<div class="form-group ">
<label class="checkbox-inline">
<input type="checkbox" value="isResetPassword" name="isResetPassword" formControlName="isResetPassword">  
{{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
</label>
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="password" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.NEW_PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="newPassword" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.RE_TYPE_PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="reTypePassword" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
</div>
</div>
</div>
</form>

Et vous devez définir votre formulaire comme ceci:

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

InformationsquelleAutor ADreNaLiNe-DJ

-1

Vous avez besoin d'écrire un rappel sur cliquez de case comme (click)="checkBoxClicked()" et en composant de définir la fonction de rappel comme suit

checkBoxClicked() {
if(!this.userProfileForm.controls.isResetPassword.value) {
this.userProfileForm.controls.password.disable();
this.userProfileForm.controls.newPassword.disable();
this.userProfileForm.controls.reTypePassword.disable();
}else {
this.userProfileForm.controls.password.enable();
this.userProfileForm.controls.newPassword.enable();
this.userProfileForm.controls.reTypePassword.enable();
}
}

InformationsquelleAutor Wasif Khan

Vous devez vous connecter pour publier un commentaire.