Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic disabled in model-driven forms is way too complex/verbose #11900

Closed
natcohen opened this issue Sep 25, 2016 · 5 comments
Closed

Dynamic disabled in model-driven forms is way too complex/verbose #11900

natcohen opened this issue Sep 25, 2016 · 5 comments

Comments

@natcohen
Copy link

natcohen commented Sep 25, 2016

In model-driven forms (formBuilder), the only way to dynamically disable an input is to define controls outside of the main formBuilder and then to subscribe the control that will influence the disable:


let val1Control = this.formBuilder.control('', Validators.required);
let val2Control = this.formBuilder.control({value:'', disabled: !val1Control.valid});
this.form = this.formBuilder.group({
  val1: val1Control,
  val2: val2Control
})

val1Control.statusChanges.subscribe((newStatus) => {
  if (val1Control.valid) {
    val2Control.enable();
  } else {
    val2Control.disable();
  }
});

This solution is extremely verbose and adds an extreme complexity when inputs are disabled depending on each others (imagine a cascade of disabled, we would need to register each variable!)

While a much simpler way would be to add [disabled]="this.form.controls.val1.valid" inside the template, Angular doesn't allow to do that and throws a warning...

I understand that model-driven forms are great for testing and that this way we can test the disable. However, I think that disable is mostly used as a visual indication for the user (not like validators) and in most cases it doesn't need to be tested!

What blocks us to use disabled in the template?

@natcohen natcohen changed the title Disable in model-driven forms is way too complex/verbose Dynamic disabled in model-driven forms is way too complex/verbose Sep 25, 2016
@manklu
Copy link

manklu commented Sep 25, 2016

the only way to dynamically disable an input is to define controls outside of the main formBuilder

Not the only way

this.form.controls['val1'].statusChanges.subscribe((newStatus) => {
  let val2 = this.form.controls['val2'];

  if (newStatus === VALID) {
    val2.enable();
  } else {
    val2.disable();
  }
}

And to recite @vicb

Your question sounds like a support request.

Please use the issue tracker only for bugs and feature requests.

Use gitter and StackOverflow for support request.

@natcohen
Copy link
Author

natcohen commented Sep 25, 2016

@manklu I think you got my point that this is too verbose for a simple disabled... And when I say "the only way" it is to emphasize the fact that it is not possible to do it through the template (of course you can imagine many variants but they are all verbose and not simple). BTW your proposed solution doesn't even initialize the disable!

So please be smart and try to understand the problem rather than focusing on details!

In addition, I'm not asking for support, I'm asking for a feature (being able to use [disabled] inside the template)! As I don't know if it's possible (maybe ractiveforms implementation doesn't allow it for whatever reason), I've expressed a question rather than a request.

@manklu
Copy link

manklu commented Sep 25, 2016

And when I say "the only way" it is to emphasize the fact that it is not possible to do it through the template

Sorry, but then you should not say

is to define controls outside of the main formBuilder

This statement is definitely false, and lead me in the wrong direction.

I'm asking for a feature (being able to use [disabled] inside the template)!

Then you should simply fill out the template to avoid any misunderstanding.

As I don't know if it's possible (maybe ractiveforms implementation doesn't allow it for whatever reason),

Have a look at #11271.

BTW your proposed solution doesn't even initialize the disable!

I thougth the rest is obvious

@natcohen
Copy link
Author

Thanks for the reference...for the rest, I won't argue, the goal of this is not to debate but to point problems and find solutions...

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants