Mixing
Disable Angular Reactive form input based on selection value
4
I have a form (using Angular Material), and I want to disable some of the input fields based on selection values. My code looks as below:
HTML
<mat-form-field class="someclass">
<mat-select placeholder="Select payment method" formControlName="paymentMethod">
<mat-option *ngFor="let payment of paymentMethodOptions" [value]="payment.value">
{{payment.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="someclass">
<input matInput placeholder="Some input" formControlName="testInput">
</mat-form-field>
TS
paymentMethodOptions: payment = [
{ value: "opt-1", viewValue: "somevalue" },
{ value: "opt-2", viewValue: "anothervalue" }
];
paymentForm = new FormGroup({
paymentMethod: new FormControl("", Validators.required),
testInput: new FormControl({ value: "", disabled: true }, [
Validators.required
])
});
I want to disable testInput if the value of the selection is equal to opt-1. I've tried several options, but got different errors and couldn't solve it. Is there any working solution to this? Thanks in advance!
angular angular-material angular-reactive-forms
edited Nov 21 '18 at 6:56
Ashish Kamble
632519
asked Nov 21 '18 at 6:25
AndrewAndrew
5510
add a comment |
4
I have a form (using Angular Material), and I want to disable some of the input fields based on selection values. My code looks as below:
HTML
<mat-form-field class="someclass">
<mat-select placeholder="Select payment method" formControlName="paymentMethod">
<mat-option *ngFor="let payment of paymentMethodOptions" [value]="payment.value">
{{payment.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="someclass">
<input matInput placeholder="Some input" formControlName="testInput">
</mat-form-field>
TS
paymentMethodOptions: payment = [
{ value: "opt-1", viewValue: "somevalue" },
{ value: "opt-2", viewValue: "anothervalue" }
];
paymentForm = new FormGroup({
paymentMethod: new FormControl("", Validators.required),
testInput: new FormControl({ value: "", disabled: true }, [
Validators.required
])
});
I want to disable testInput if the value of the selection is equal to opt-1. I've tried several options, but got different errors and couldn't solve it. Is there any working solution to this? Thanks in advance!
angular angular-material angular-reactive-forms
edited Nov 21 '18 at 6:56
Ashish Kamble
632519
asked Nov 21 '18 at 6:25
AndrewAndrew
5510
I like a enabledDirective (it's looks like a work-around, but it have tha advantage that is the .html with control the enabled) stackoverflow.com/questions/47937639/…
– Eliseo
Nov 21 '18 at 7:49
add a comment |
4
4
4
I have a form (using Angular Material), and I want to disable some of the input fields based on selection values. My code looks as below:
HTML
<mat-form-field class="someclass">
<mat-select placeholder="Select payment method" formControlName="paymentMethod">
<mat-option *ngFor="let payment of paymentMethodOptions" [value]="payment.value">
{{payment.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="someclass">
<input matInput placeholder="Some input" formControlName="testInput">
</mat-form-field>
TS
paymentMethodOptions: payment = [
{ value: "opt-1", viewValue: "somevalue" },
{ value: "opt-2", viewValue: "anothervalue" }
];
paymentForm = new FormGroup({
paymentMethod: new FormControl("", Validators.required),
testInput: new FormControl({ value: "", disabled: true }, [
Validators.required
])
});
I want to disable testInput if the value of the selection is equal to opt-1. I've tried several options, but got different errors and couldn't solve it. Is there any working solution to this? Thanks in advance!
angular angular-material angular-reactive-forms
edited Nov 21 '18 at 6:56
Ashish Kamble
632519
asked Nov 21 '18 at 6:25
AndrewAndrew
5510
I have a form (using Angular Material), and I want to disable some of the input fields based on selection values. My code looks as below:
HTML
<mat-form-field class="someclass">
<mat-select placeholder="Select payment method" formControlName="paymentMethod">
<mat-option *ngFor="let payment of paymentMethodOptions" [value]="payment.value">
{{payment.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="someclass">
<input matInput placeholder="Some input" formControlName="testInput">
</mat-form-field>
TS
paymentMethodOptions: payment = [
{ value: "opt-1", viewValue: "somevalue" },
{ value: "opt-2", viewValue: "anothervalue" }
];
paymentForm = new FormGroup({
paymentMethod: new FormControl("", Validators.required),
testInput: new FormControl({ value: "", disabled: true }, [
Validators.required
])
});
I want to disable testInput if the value of the selection is equal to opt-1. I've tried several options, but got different errors and couldn't solve it. Is there any working solution to this? Thanks in advance!
angular angular-material angular-reactive-forms
angular angular-material angular-reactive-forms
edited Nov 21 '18 at 6:56
Ashish Kamble
632519
asked Nov 21 '18 at 6:25
AndrewAndrew
5510
edited Nov 21 '18 at 6:56
Ashish Kamble
632519
asked Nov 21 '18 at 6:25
AndrewAndrew
5510
edited Nov 21 '18 at 6:56
Ashish Kamble
632519
edited Nov 21 '18 at 6:56
Ashish Kamble
632519
edited Nov 21 '18 at 6:56
Ashish Kamble
632519
632519
asked Nov 21 '18 at 6:25
AndrewAndrew
5510
asked Nov 21 '18 at 6:25
AndrewAndrew
5510
asked Nov 21 '18 at 6:25
AndrewAndrew
5510
5510
I like a enabledDirective (it's looks like a work-around, but it have tha advantage that is the .html with control the enabled) stackoverflow.com/questions/47937639/…
– Eliseo
Nov 21 '18 at 7:49
add a comment |
I like a enabledDirective (it's looks like a work-around, but it have tha advantage that is the .html with control the enabled) stackoverflow.com/questions/47937639/…
– Eliseo
Nov 21 '18 at 7:49
I like a enabledDirective (it's looks like a work-around, but it have tha advantage that is the .html with control the enabled) stackoverflow.com/questions/47937639/…
– Eliseo
Nov 21 '18 at 7:49
I like a enabledDirective (it's looks like a work-around, but it have tha advantage that is the .html with control the enabled) stackoverflow.com/questions/47937639/…
– Eliseo
Nov 21 '18 at 7:49
add a comment |
3 Answers
3
active
oldest
votes
3
You can leverage the selectionChange @Output property on MatSelect and react accordingly:
onSelectionChanged({value}) {
console.log(value);
if(value === 'opt-1') {
this.paymentForm.get('testInput').disable();
} else {
this.paymentForm.get('testInput').enable();
}
}
And in template
<mat-select ... (selectionChange)="onSelectionChanged($event)">
Here's a Sample StackBlitz for your ref.
NOTE: In case there are more controls in your form than just mat-select, listening to valueChanges on the whole form could be expensive as this will get triggered every time there is a change in any of the form control. All we are concerned about is the change in the mat-select selection change.
answered Nov 21 '18 at 6:49
SiddAjmeraSiddAjmera
14.4k31137
This worked perfectly for me, thank you!
– Andrew
Nov 21 '18 at 6:55
@Andrew, if any of these answers helped you with your issue please consider marking any one of them as a solution to close the loop.
– SiddAjmera
Nov 21 '18 at 7:10
add a comment |
4
You'll can listen to the valueChanges event of the form :
this.paymentForm.valueChanges.subscribe((value) => {
if(value.paymentMethod == 'opt-1'){
this.paymentForm.controls['testInput'].disable();
}else{
this.paymentForm.controls['testInput'].enable();
}
});
So everytime the select changes , the valueChanges event is called , the conditions kick in and it will enable or disable the formControl.
answered Nov 21 '18 at 6:45
CruelEngineCruelEngine
1,0411919
1
Looks like your solution works too. Thank you very much!
– Andrew
Nov 21 '18 at 6:55
Why are you listening tovalueChangeson the whole form? Won't it run every time there's any change on the form? We should only be concerned with themat-selectvalue change here.
– SiddAjmera
Nov 21 '18 at 6:56
1
Wouldn't it be safe to assume that OP was a mere abstraction of the original implementation and that there are going to be a lot more form controls in the form rather than just amat-select?
– SiddAjmera
Nov 21 '18 at 7:03
1
Both solutions work good, will try using both of them and decide which one suits my case better. Thanks for your support :)
– Andrew
Nov 21 '18 at 7:09
1
@Andrew happy coding :)
– CruelEngine
Nov 21 '18 at 7:11
|
show 4 more comments
2
Though there are already answers provided, If any had stumbled with the same issue. You can directly disable a form field by directly accessing its control
Had created a Stackblitz demo link
<!-- INPUT FIELD -->
<mat-form-field formControlName="testInput">
<input matInput
placeholder="Some input"
[disabled]="paymentForm.get('paymentMethod').value === 'opt-1'"> // Disables the input once paymentMethod's formControlName value is opt-1
</mat-form-field>
answered Nov 21 '18 at 7:21
KShewenggerKShewengger
1,395613
Doesn't work. You'll have to useattr.disabledin this case. Also it did not change thedisabledstate ifopt-1was selected first and thenopt-2is selected.
– SiddAjmera
Nov 21 '18 at 7:23
Had accidentally removed the [disabled] on input from the Stackblitz demo link i sent. Now it actually changes its state, you can try it. You'll know it gets disabled when you can't click on the input anymore and it has a dotted border instead of solid stackblitz.com/edit/angular-nuygok
– KShewengger
Nov 21 '18 at 7:27
1
Indeed it works. So the trick is to usepaymentForm.get('paymentMethod').valueinstead ofpaymentForm.value.paymentMethod
– SiddAjmera
Nov 21 '18 at 7:36
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406344%2fdisable-angular-reactive-form-input-based-on-selection-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
You can leverage the selectionChange @Output property on MatSelect and react accordingly:
onSelectionChanged({value}) {
console.log(value);
if(value === 'opt-1') {
this.paymentForm.get('testInput').disable();
} else {
this.paymentForm.get('testInput').enable();
}
}
And in template
<mat-select ... (selectionChange)="onSelectionChanged($event)">
Here's a Sample StackBlitz for your ref.
NOTE: In case there are more controls in your form than just mat-select, listening to valueChanges on the whole form could be expensive as this will get triggered every time there is a change in any of the form control. All we are concerned about is the change in the mat-select selection change.
answered Nov 21 '18 at 6:49
SiddAjmeraSiddAjmera
14.4k31137
This worked perfectly for me, thank you!
– Andrew
Nov 21 '18 at 6:55
@Andrew, if any of these answers helped you with your issue please consider marking any one of them as a solution to close the loop.
– SiddAjmera
Nov 21 '18 at 7:10
add a comment |
3
You can leverage the selectionChange @Output property on MatSelect and react accordingly:
onSelectionChanged({value}) {
console.log(value);
if(value === 'opt-1') {
this.paymentForm.get('testInput').disable();
} else {
this.paymentForm.get('testInput').enable();
}
}
And in template
<mat-select ... (selectionChange)="onSelectionChanged($event)">
Here's a Sample StackBlitz for your ref.
NOTE: In case there are more controls in your form than just mat-select, listening to valueChanges on the whole form could be expensive as this will get triggered every time there is a change in any of the form control. All we are concerned about is the change in the mat-select selection change.
answered Nov 21 '18 at 6:49
SiddAjmeraSiddAjmera
14.4k31137
This worked perfectly for me, thank you!
– Andrew
Nov 21 '18 at 6:55
@Andrew, if any of these answers helped you with your issue please consider marking any one of them as a solution to close the loop.
– SiddAjmera
Nov 21 '18 at 7:10
add a comment |
3
3
3
You can leverage the selectionChange @Output property on MatSelect and react accordingly:
onSelectionChanged({value}) {
console.log(value);
if(value === 'opt-1') {
this.paymentForm.get('testInput').disable();
} else {
this.paymentForm.get('testInput').enable();
}
}
And in template
<mat-select ... (selectionChange)="onSelectionChanged($event)">
Here's a Sample StackBlitz for your ref.
NOTE: In case there are more controls in your form than just mat-select, listening to valueChanges on the whole form could be expensive as this will get triggered every time there is a change in any of the form control. All we are concerned about is the change in the mat-select selection change.
answered Nov 21 '18 at 6:49
SiddAjmeraSiddAjmera
14.4k31137
You can leverage the selectionChange @Output property on MatSelect and react accordingly:
onSelectionChanged({value}) {
console.log(value);
if(value === 'opt-1') {
this.paymentForm.get('testInput').disable();
} else {
this.paymentForm.get('testInput').enable();
}
}
And in template
<mat-select ... (selectionChange)="onSelectionChanged($event)">
Here's a Sample StackBlitz for your ref.
NOTE: In case there are more controls in your form than just mat-select, listening to valueChanges on the whole form could be expensive as this will get triggered every time there is a change in any of the form control. All we are concerned about is the change in the mat-select selection change.
answered Nov 21 '18 at 6:49
SiddAjmeraSiddAjmera
14.4k31137
edited Nov 21 '18 at 7:08
answered Nov 21 '18 at 6:49
SiddAjmeraSiddAjmera
14.4k31137
answered Nov 21 '18 at 6:49
SiddAjmeraSiddAjmera
14.4k31137
answered Nov 21 '18 at 6:49
SiddAjmeraSiddAjmera
14.4k31137
14.4k31137
This worked perfectly for me, thank you!
– Andrew
Nov 21 '18 at 6:55
@Andrew, if any of these answers helped you with your issue please consider marking any one of them as a solution to close the loop.
– SiddAjmera
Nov 21 '18 at 7:10
add a comment |
This worked perfectly for me, thank you!
– Andrew
Nov 21 '18 at 6:55
@Andrew, if any of these answers helped you with your issue please consider marking any one of them as a solution to close the loop.
– SiddAjmera
Nov 21 '18 at 7:10
This worked perfectly for me, thank you!
– Andrew
Nov 21 '18 at 6:55
This worked perfectly for me, thank you!
– Andrew
Nov 21 '18 at 6:55
@Andrew, if any of these answers helped you with your issue please consider marking any one of them as a solution to close the loop.
– SiddAjmera
Nov 21 '18 at 7:10
@Andrew, if any of these answers helped you with your issue please consider marking any one of them as a solution to close the loop.
– SiddAjmera
Nov 21 '18 at 7:10
add a comment |
4
You'll can listen to the valueChanges event of the form :
this.paymentForm.valueChanges.subscribe((value) => {
if(value.paymentMethod == 'opt-1'){
this.paymentForm.controls['testInput'].disable();
}else{
this.paymentForm.controls['testInput'].enable();
}
});
So everytime the select changes , the valueChanges event is called , the conditions kick in and it will enable or disable the formControl.
answered Nov 21 '18 at 6:45
CruelEngineCruelEngine
1,0411919
1
Looks like your solution works too. Thank you very much!
– Andrew
Nov 21 '18 at 6:55
Why are you listening tovalueChangeson the whole form? Won't it run every time there's any change on the form? We should only be concerned with themat-selectvalue change here.
– SiddAjmera
Nov 21 '18 at 6:56
1
Wouldn't it be safe to assume that OP was a mere abstraction of the original implementation and that there are going to be a lot more form controls in the form rather than just amat-select?
– SiddAjmera
Nov 21 '18 at 7:03
1
Both solutions work good, will try using both of them and decide which one suits my case better. Thanks for your support :)
– Andrew
Nov 21 '18 at 7:09
1
@Andrew happy coding :)
– CruelEngine
Nov 21 '18 at 7:11
|
show 4 more comments
4
You'll can listen to the valueChanges event of the form :
this.paymentForm.valueChanges.subscribe((value) => {
if(value.paymentMethod == 'opt-1'){
this.paymentForm.controls['testInput'].disable();
}else{
this.paymentForm.controls['testInput'].enable();
}
});
So everytime the select changes , the valueChanges event is called , the conditions kick in and it will enable or disable the formControl.
answered Nov 21 '18 at 6:45
CruelEngineCruelEngine
1,0411919
1
Looks like your solution works too. Thank you very much!
– Andrew
Nov 21 '18 at 6:55
Why are you listening tovalueChangeson the whole form? Won't it run every time there's any change on the form? We should only be concerned with themat-selectvalue change here.
– SiddAjmera
Nov 21 '18 at 6:56
1
Wouldn't it be safe to assume that OP was a mere abstraction of the original implementation and that there are going to be a lot more form controls in the form rather than just amat-select?
– SiddAjmera
Nov 21 '18 at 7:03
1
Both solutions work good, will try using both of them and decide which one suits my case better. Thanks for your support :)
– Andrew
Nov 21 '18 at 7:09
1
@Andrew happy coding :)
– CruelEngine
Nov 21 '18 at 7:11
|
show 4 more comments
4
4
4
You'll can listen to the valueChanges event of the form :
this.paymentForm.valueChanges.subscribe((value) => {
if(value.paymentMethod == 'opt-1'){
this.paymentForm.controls['testInput'].disable();
}else{
this.paymentForm.controls['testInput'].enable();
}
});
So everytime the select changes , the valueChanges event is called , the conditions kick in and it will enable or disable the formControl.
answered Nov 21 '18 at 6:45
CruelEngineCruelEngine
1,0411919
You'll can listen to the valueChanges event of the form :
this.paymentForm.valueChanges.subscribe((value) => {
if(value.paymentMethod == 'opt-1'){
this.paymentForm.controls['testInput'].disable();
}else{
this.paymentForm.controls['testInput'].enable();
}
});
So everytime the select changes , the valueChanges event is called , the conditions kick in and it will enable or disable the formControl.
answered Nov 21 '18 at 6:45
CruelEngineCruelEngine
1,0411919
answered Nov 21 '18 at 6:45
CruelEngineCruelEngine
1,0411919
answered Nov 21 '18 at 6:45
CruelEngineCruelEngine
1,0411919
answered Nov 21 '18 at 6:45
CruelEngineCruelEngine
1,0411919
1,0411919
1
Looks like your solution works too. Thank you very much!
– Andrew
Nov 21 '18 at 6:55
Why are you listening tovalueChangeson the whole form? Won't it run every time there's any change on the form? We should only be concerned with themat-selectvalue change here.
– SiddAjmera
Nov 21 '18 at 6:56
1
Wouldn't it be safe to assume that OP was a mere abstraction of the original implementation and that there are going to be a lot more form controls in the form rather than just amat-select?
– SiddAjmera
Nov 21 '18 at 7:03
1
Both solutions work good, will try using both of them and decide which one suits my case better. Thanks for your support :)
– Andrew
Nov 21 '18 at 7:09
1
@Andrew happy coding :)
– CruelEngine
Nov 21 '18 at 7:11
|
show 4 more comments
1
Looks like your solution works too. Thank you very much!
– Andrew
Nov 21 '18 at 6:55
Why are you listening tovalueChangeson the whole form? Won't it run every time there's any change on the form? We should only be concerned with themat-selectvalue change here.
– SiddAjmera
Nov 21 '18 at 6:56
1
Wouldn't it be safe to assume that OP was a mere abstraction of the original implementation and that there are going to be a lot more form controls in the form rather than just amat-select?
– SiddAjmera
Nov 21 '18 at 7:03
1
Both solutions work good, will try using both of them and decide which one suits my case better. Thanks for your support :)
– Andrew
Nov 21 '18 at 7:09
1
@Andrew happy coding :)
– CruelEngine
Nov 21 '18 at 7:11
1
1
Looks like your solution works too. Thank you very much!
– Andrew
Nov 21 '18 at 6:55
Looks like your solution works too. Thank you very much!
– Andrew
Nov 21 '18 at 6:55
Why are you listening to
valueChanges on the whole form? Won't it run every time there's any change on the form? We should only be concerned with the mat-select value change here.– SiddAjmera
Nov 21 '18 at 6:56
Why are you listening to
valueChanges on the whole form? Won't it run every time there's any change on the form? We should only be concerned with the mat-select value change here.– SiddAjmera
Nov 21 '18 at 6:56
1
1
Wouldn't it be safe to assume that OP was a mere abstraction of the original implementation and that there are going to be a lot more form controls in the form rather than just a
mat-select?– SiddAjmera
Nov 21 '18 at 7:03
Wouldn't it be safe to assume that OP was a mere abstraction of the original implementation and that there are going to be a lot more form controls in the form rather than just a
mat-select?– SiddAjmera
Nov 21 '18 at 7:03
1
1
Both solutions work good, will try using both of them and decide which one suits my case better. Thanks for your support :)
– Andrew
Nov 21 '18 at 7:09
Both solutions work good, will try using both of them and decide which one suits my case better. Thanks for your support :)
– Andrew
Nov 21 '18 at 7:09
1
1
@Andrew happy coding :)
– CruelEngine
Nov 21 '18 at 7:11
@Andrew happy coding :)
– CruelEngine
Nov 21 '18 at 7:11
|
show 4 more comments
2
Though there are already answers provided, If any had stumbled with the same issue. You can directly disable a form field by directly accessing its control
Had created a Stackblitz demo link
<!-- INPUT FIELD -->
<mat-form-field formControlName="testInput">
<input matInput
placeholder="Some input"
[disabled]="paymentForm.get('paymentMethod').value === 'opt-1'"> // Disables the input once paymentMethod's formControlName value is opt-1
</mat-form-field>
answered Nov 21 '18 at 7:21
KShewenggerKShewengger
1,395613
Doesn't work. You'll have to useattr.disabledin this case. Also it did not change thedisabledstate ifopt-1was selected first and thenopt-2is selected.
– SiddAjmera
Nov 21 '18 at 7:23
Had accidentally removed the [disabled] on input from the Stackblitz demo link i sent. Now it actually changes its state, you can try it. You'll know it gets disabled when you can't click on the input anymore and it has a dotted border instead of solid stackblitz.com/edit/angular-nuygok
– KShewengger
Nov 21 '18 at 7:27
1
Indeed it works. So the trick is to usepaymentForm.get('paymentMethod').valueinstead ofpaymentForm.value.paymentMethod
– SiddAjmera
Nov 21 '18 at 7:36
add a comment |
2
Though there are already answers provided, If any had stumbled with the same issue. You can directly disable a form field by directly accessing its control
Had created a Stackblitz demo link
<!-- INPUT FIELD -->
<mat-form-field formControlName="testInput">
<input matInput
placeholder="Some input"
[disabled]="paymentForm.get('paymentMethod').value === 'opt-1'"> // Disables the input once paymentMethod's formControlName value is opt-1
</mat-form-field>
answered Nov 21 '18 at 7:21
KShewenggerKShewengger
1,395613
Doesn't work. You'll have to useattr.disabledin this case. Also it did not change thedisabledstate ifopt-1was selected first and thenopt-2is selected.
– SiddAjmera
Nov 21 '18 at 7:23
Had accidentally removed the [disabled] on input from the Stackblitz demo link i sent. Now it actually changes its state, you can try it. You'll know it gets disabled when you can't click on the input anymore and it has a dotted border instead of solid stackblitz.com/edit/angular-nuygok
– KShewengger
Nov 21 '18 at 7:27
1
Indeed it works. So the trick is to usepaymentForm.get('paymentMethod').valueinstead ofpaymentForm.value.paymentMethod
– SiddAjmera
Nov 21 '18 at 7:36
add a comment |
2
2
2
Though there are already answers provided, If any had stumbled with the same issue. You can directly disable a form field by directly accessing its control
Had created a Stackblitz demo link
<!-- INPUT FIELD -->
<mat-form-field formControlName="testInput">
<input matInput
placeholder="Some input"
[disabled]="paymentForm.get('paymentMethod').value === 'opt-1'"> // Disables the input once paymentMethod's formControlName value is opt-1
</mat-form-field>
answered Nov 21 '18 at 7:21
KShewenggerKShewengger
1,395613
Though there are already answers provided, If any had stumbled with the same issue. You can directly disable a form field by directly accessing its control
Had created a Stackblitz demo link
<!-- INPUT FIELD -->
<mat-form-field formControlName="testInput">
<input matInput
placeholder="Some input"
[disabled]="paymentForm.get('paymentMethod').value === 'opt-1'"> // Disables the input once paymentMethod's formControlName value is opt-1
</mat-form-field>
answered Nov 21 '18 at 7:21
KShewenggerKShewengger
1,395613
edited Nov 24 '18 at 13:52
answered Nov 21 '18 at 7:21
KShewenggerKShewengger
1,395613
answered Nov 21 '18 at 7:21
KShewenggerKShewengger
1,395613
answered Nov 21 '18 at 7:21
KShewenggerKShewengger
1,395613
1,395613
Doesn't work. You'll have to useattr.disabledin this case. Also it did not change thedisabledstate ifopt-1was selected first and thenopt-2is selected.
– SiddAjmera
Nov 21 '18 at 7:23
Had accidentally removed the [disabled] on input from the Stackblitz demo link i sent. Now it actually changes its state, you can try it. You'll know it gets disabled when you can't click on the input anymore and it has a dotted border instead of solid stackblitz.com/edit/angular-nuygok
– KShewengger
Nov 21 '18 at 7:27
1
Indeed it works. So the trick is to usepaymentForm.get('paymentMethod').valueinstead ofpaymentForm.value.paymentMethod
– SiddAjmera
Nov 21 '18 at 7:36
add a comment |
Doesn't work. You'll have to useattr.disabledin this case. Also it did not change thedisabledstate ifopt-1was selected first and thenopt-2is selected.
– SiddAjmera
Nov 21 '18 at 7:23
Had accidentally removed the [disabled] on input from the Stackblitz demo link i sent. Now it actually changes its state, you can try it. You'll know it gets disabled when you can't click on the input anymore and it has a dotted border instead of solid stackblitz.com/edit/angular-nuygok
– KShewengger
Nov 21 '18 at 7:27
1
Indeed it works. So the trick is to usepaymentForm.get('paymentMethod').valueinstead ofpaymentForm.value.paymentMethod
– SiddAjmera
Nov 21 '18 at 7:36
Doesn't work. You'll have to use
attr.disabled in this case. Also it did not change the disabled state if opt-1 was selected first and then opt-2 is selected.– SiddAjmera
Nov 21 '18 at 7:23
Doesn't work. You'll have to use
attr.disabled in this case. Also it did not change the disabled state if opt-1 was selected first and then opt-2 is selected.– SiddAjmera
Nov 21 '18 at 7:23
Had accidentally removed the [disabled] on input from the Stackblitz demo link i sent. Now it actually changes its state, you can try it. You'll know it gets disabled when you can't click on the input anymore and it has a dotted border instead of solid stackblitz.com/edit/angular-nuygok
– KShewengger
Nov 21 '18 at 7:27
Had accidentally removed the [disabled] on input from the Stackblitz demo link i sent. Now it actually changes its state, you can try it. You'll know it gets disabled when you can't click on the input anymore and it has a dotted border instead of solid stackblitz.com/edit/angular-nuygok
– KShewengger
Nov 21 '18 at 7:27
1
1
Indeed it works. So the trick is to use
paymentForm.get('paymentMethod').value instead of paymentForm.value.paymentMethod– SiddAjmera
Nov 21 '18 at 7:36
Indeed it works. So the trick is to use
paymentForm.get('paymentMethod').value instead of paymentForm.value.paymentMethod– SiddAjmera
Nov 21 '18 at 7:36
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406344%2fdisable-angular-reactive-form-input-based-on-selection-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I like a enabledDirective (it's looks like a work-around, but it have tha advantage that is the .html with control the enabled) stackoverflow.com/questions/47937639/…
– Eliseo
Nov 21 '18 at 7:49