Angular 2FormBuilderはチェックボックス選択のフィールドを無効にします

Janith Widarshana

Angular cliプロジェクトをビルドし、チェックボックス付きのフォームがあります。一部のフィールドは、チェックボックスの選択時に無効にする必要があります。

フォームは次のとおりです ここに画像の説明を入力してください

パスワード、新しいパスワードを無効/有効にし、チェックボックス選択イベントでパスワードフィールドを再入力する必要があります。

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

フォームはコンストラクター内に組み込まれています。チェックボックスの選択で上記のフィールドを無効/有効にするにはどうすればよいですか。

development033

最初は、チェックボックスが選択されている場合にのみフィールド有効にしたいと思いますよね?もしそうなら、ここに行きます:isResetPassword

1-フォームの構成は次のようになります。

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

ここでは、this.isResetPasswordがfalseの場合にのみ入力を無効にしていることに注意してください

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.subscribe(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 -あなたが渡す必要はありません、フォームの値を(ngSubmit)あなたはすでにの参照たのでuserProfileForm中をform

の代わりに:

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

デモ(使用(change)

デモ(使用valueChanges

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

[2つの選択]チェックボックスで[動的に生成される]チェックボックスを無効にする-Angular

分類Dev

Angular2で[無効]を使用して他のチェックボックスを無効にする

分類Dev

Angular7-チェックボックスがチェックされている場合にのみ入力フィールドを検証します

分類Dev

Angular2、チェックボックスが選択されていない場合はボタンを無効にする

分類Dev

チェックボックスグループAngular1.6の選択された値を取得します

分類Dev

Angular 9 :(ボックスではなく)ラベルチェックボックスを無効にする

分類Dev

Angular2条件に応じてチェックボックスを選択または選択解除します

分類Dev

Angular / ionic:チェックボックスコントロールを無効にする方法は?

分類Dev

スペースバーを介してAngular2のチェックボックスをオンまたはオフにします

分類Dev

Angular.jsを使用してチェックされたチェックボックスに従って、選択ボックスを無効にできませんでした

分類Dev

最初にチェックしたチェックボックスの値に基づいて、戻るボタンのクリック時にAngular6リアクティブフォームをリロードします

分類Dev

Angular 2のngFor内でフィルタリングされたすべてのチェックボックスを選択するにはどうすればよいですか?

分類Dev

Angular2選択したすべてのチェックボックスを取得する方法

分類Dev

initでangular2-treeを使用してツリー内のすべてのチェックボックスを選択できません

分類Dev

選択したチェックボックスの数を計算します-Angular6

分類Dev

チェックボックスAngularですべてのアイテムを選択します

分類Dev

Angular5チェックボックスを選択および選択解除します

分類Dev

角度のあるマテリアルを使用して、angular5のチェックボックスを1つ選択してすべてのチェックボックスを選択します

分類Dev

Angularで別のチェックボックスを選択したときにチェックボックスの選択を自動的に解除するにはどうすればよいですか?

分類Dev

Angularマテリアルチェックボックスは自動的にチェックを外します

分類Dev

Angular material datatableチェックボックスは、すべてを選択するか、単一のアイテムを選択して選択を解除すると削除するときに、値を配列に保持します

分類Dev

Angular。チェックボックスを選択した後、httpリクエストを送信します

分類Dev

Angular2ですべてのチェックボックスをtrueまたはfalseに変更します

分類Dev

Angular 2ngModelChangeイベントのチェックボックスをオフにします

分類Dev

Angular ui-gridの列ヘッダーに追加の入力フィールド(チェックボックス)を追加する方法

分類Dev

Angular ui-gridの列ヘッダーに追加の入力フィールド(チェックボックス)を追加する方法

分類Dev

Angular Material:チェックボックスのみをクリックしてテーブルの行を選択するにはどうすればよいですか?

分類Dev

デフォルトでチェックボックスを選択するにはどうすればよいですか?<mat-list-option>、Angular Material

分類Dev

Angular 6 + Bootstrap 4すべてを選択し、すべてのチェックボックスの選択を解除します

Related 関連記事

  1. 1

    [2つの選択]チェックボックスで[動的に生成される]チェックボックスを無効にする-Angular

  2. 2

    Angular2で[無効]を使用して他のチェックボックスを無効にする

  3. 3

    Angular7-チェックボックスがチェックされている場合にのみ入力フィールドを検証します

  4. 4

    Angular2、チェックボックスが選択されていない場合はボタンを無効にする

  5. 5

    チェックボックスグループAngular1.6の選択された値を取得します

  6. 6

    Angular 9 :(ボックスではなく)ラベルチェックボックスを無効にする

  7. 7

    Angular2条件に応じてチェックボックスを選択または選択解除します

  8. 8

    Angular / ionic:チェックボックスコントロールを無効にする方法は?

  9. 9

    スペースバーを介してAngular2のチェックボックスをオンまたはオフにします

  10. 10

    Angular.jsを使用してチェックされたチェックボックスに従って、選択ボックスを無効にできませんでした

  11. 11

    最初にチェックしたチェックボックスの値に基づいて、戻るボタンのクリック時にAngular6リアクティブフォームをリロードします

  12. 12

    Angular 2のngFor内でフィルタリングされたすべてのチェックボックスを選択するにはどうすればよいですか?

  13. 13

    Angular2選択したすべてのチェックボックスを取得する方法

  14. 14

    initでangular2-treeを使用してツリー内のすべてのチェックボックスを選択できません

  15. 15

    選択したチェックボックスの数を計算します-Angular6

  16. 16

    チェックボックスAngularですべてのアイテムを選択します

  17. 17

    Angular5チェックボックスを選択および選択解除します

  18. 18

    角度のあるマテリアルを使用して、angular5のチェックボックスを1つ選択してすべてのチェックボックスを選択します

  19. 19

    Angularで別のチェックボックスを選択したときにチェックボックスの選択を自動的に解除するにはどうすればよいですか?

  20. 20

    Angularマテリアルチェックボックスは自動的にチェックを外します

  21. 21

    Angular material datatableチェックボックスは、すべてを選択するか、単一のアイテムを選択して選択を解除すると削除するときに、値を配列に保持します

  22. 22

    Angular。チェックボックスを選択した後、httpリクエストを送信します

  23. 23

    Angular2ですべてのチェックボックスをtrueまたはfalseに変更します

  24. 24

    Angular 2ngModelChangeイベントのチェックボックスをオフにします

  25. 25

    Angular ui-gridの列ヘッダーに追加の入力フィールド(チェックボックス)を追加する方法

  26. 26

    Angular ui-gridの列ヘッダーに追加の入力フィールド(チェックボックス)を追加する方法

  27. 27

    Angular Material:チェックボックスのみをクリックしてテーブルの行を選択するにはどうすればよいですか?

  28. 28

    デフォルトでチェックボックスを選択するにはどうすればよいですか?<mat-list-option>、Angular Material

  29. 29

    Angular 6 + Bootstrap 4すべてを選択し、すべてのチェックボックスの選択を解除します

ホットタグ

アーカイブ