Angular 2 FormBuilder禁用複選框上的字段選擇

我已經構建了角度cli項目並且具有複選框。某些字段必須在複選框選擇中禁用。Angular 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.userProfileForm = this.formBuilder.group({ 
    // ... 
    password: [{ 
    value: null, 
    disabled: !this.isResetPassword 
    }], 
    newPassword: [{ 
    value: null, 
    disabled: !this.isResetPassword 
    }], 
    reTypePassword: [{ 
    value: null, 
    disabled: !this.isResetPassword 
    }] 
});

請注意，我在這裏禁用的投入只有當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 - 你並不需要通過形式值在(ngSubmit)因爲你已經在form中的userProfileForm參考。

相反的：

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

DEMO (using (change))

DEMO (using valueChanges)

來源

2017-07-07 21:14:34 developer033

-1

你需要寫上覆選框的點擊回調像(click)="checkBoxClicked()"和組件定義回調函數作爲替代如下

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

使用模板中[formControl]您的控件，使用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] 
    }) 
})

然後在您的模板上將密碼欄更改爲：

<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

按照以上回答使用formControlName。然後點擊複選框調用一個eventhandler方法，如果您不直接使用複選框綁定它，則可以切換isResetPassword。而你在formgroup上調用updateValueAndValidity（）方法。

來源

2017-07-07 22:04:54

按照上面的答案使用formControlName。在複選框上點擊事件時，調用一個事件處理程序，在其中切換值isResetPassword，然後添加下面的語句。 userProfileForm.updateValueAndValidity();

來源

2017-07-07 22:10:59

Angular 2 FormBuilder禁用複選框上的字段選擇

回答

相關問題