角2 FormBuilderチェックボックスのフィールドを無効にする選択

私は角型cliプロジェクトを作成し、チェックボックス付きのフォームを持っています。いくつかのフィールドは、チェックボックスの選択を無効にする必要があります。角2 FormBuilderチェックボックスのフィールドを無効にする選択

は、パスワードを有効/無効にする必要があり、新しいパスワードとチェックボックスを選択したイベントの種類のパスワードフィールドを次のように再

フォームがあります。

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をコード

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

フォームコンストラクタに内蔵しています。上記のフィールドを無効にする/有効にするにはどうすればよいですか？

出典

2017-07-07 Janith Widarshana

まず、私はあなたがしている場合のみisResetPasswordチェックボックスが選択されている場合、右、フィールドを有効にしたいことを信じますか？もしそうなら、ここで行く：

1 - フォームの構成は次のようにする必要があります：this.isResetPasswordがfalseの場合のみ、ここで私が入力を無効にしています

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

注意。

2 - あなたの<input type="checkbox">の変化を検出するには、いずれかの(change)でテンプレート使用することができます。

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

を...あるいは、コンポーネントで、valueChangesを使用して：

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

をそして、もちろん、ここでfunctionは、フィールドの状態を操作することです。

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

いくつかのヒント：

1 - それは好みの問題だが、それはあなたがこのような[formControl]を使用する必要がないことを言及する価値がある：

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

代わりに、formControlName：

formControlName="isResetPassword"

すべてのコントロールについて同じことを行うことができます。

2 - あなたはすでにformでuserProfileFormの参照をしましたので、(ngSubmit)にフォーム値を渡す必要はありません。

の代わりに：

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

この：

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

3 - あなたの代わりに.valueの、無効な入力のvalueを見たい場合は、このように、.getRawValue()を使用する必要があります。

this.userProfileForm.getRawValue();

使用formControlName上記の解答を1として10
DEMO (using (change))

DEMO (using valueChanges)

出典

2017-07-07 21:14:34 developer033

-1

あなたが(click)="checkBoxClicked()"のように、チェックボックスをクリックするだけでコールバックを書き、テンプレートにあなたのコントロールの[formControl]を使用するのではなく、

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

出典

2017-07-07 11:29:12

を次のようにコンポーネントで、formControlNameを使用するコールバック関数を定義する必要があります。

<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>

そして、あなたはこのようなあなたのフォームを定義する必要があります：

フォームは次のようになります

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

出典

2017-07-07 11:38:50

最も簡単な方法は、単にパスワードのフォームグループを作成するには、次のようになります。

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

次に、あなたのテンプレートにこれにCOLパスワードを変更します。

コンポーネントの

<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>

：

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

出典

2017-07-07 11:45:18

。チェックボックスをクリックすると、チェックボックスに直接バインドしていない場合、isResetPasswordを切り替えることができる1つのイベントハンドラメソッドが呼び出されます。そしてあなたのフォームグループはupdateValueAndValidity（）メソッドを呼び出します。

出典

2017-07-07 22:04:54

上記の回答は、formControlNameを使用してください。チェックボックスのクリックイベントでは、isResetPasswordの値をトグルして、以下のステートメントを追加するイベントハンドラを呼び出します。 userProfileForm.updateValueAndValidity();

出典

2017-07-07 22:10:59

角2 FormBuilderチェックボックスのフィールドを無効にする選択

答えて

関連する問題