Angular: Cant make a input required dynamically

[zarisi]

Hi.
I need to create a component tath have inputs tath can be required depending on a condition but trying it i wasnt able to do it, i tried using [required]="var" but it always resolve the input as required.
In HTML5 doc it seems tath having requiered will always make it requireded if you put true or false.

Is there a way to make a input required dynamically?

[furrary]

Which version of Angular you're using? To my knowledge, as of 4.0.0, it should work as you expect.

@Component(
  selector: 'hello-world',
  template: '''
    <form>
      <input [required]=requireState>
      <input type="submit">
    </form>
    <button (click)="toggleRequired()">
      toggle
    </button>
  ''',
)
class HelloWorldComponent {
  bool requireState = false;
  void toggleRequired() {
    requireState = !requireState;
  }
}

I tried this and it worked.

[furrary]

If you use angular_forms, this may be related to #660.

[zarisi]

Using angular 5 alpha+1 with the corresponfing angular forms version, so the only way to make it work is downgrade version?

[furrary]

No, that is not what I was trying to say.

I mean that the required attribute DOES change in the DOM.
However, it's a known issue that the form validator provided by angular_forms won't change when the required attribute dynamically changes.

@Component(selector: 'hello-world', template: '''
    <form #myForm="ngForm">
      <input [required]="requiredState" 
             [(ngModel)]="model" 
             ngControl="model">
      <input type="submit" [disabled]="!myForm.valid">
    </form>
    <button (click)="toggleRequired()">
      toggle
    </button>
  ''', directives: const [formDirectives])
class HelloWorldComponent {
  bool requiredState = true;
  String model;

  void toggleRequired() {
    requiredState = !requiredState;
  }
}

In this example, clicking the toggle button removes required attribute from the DOM, but won't enable the submit button.

[zarisi]

oh ok, sorry, there isnt a way to manually reload the validator?

[matanlurey]

@alorenzen

[furrary]

I don't know if that's possible, but a workaround is to write your own validator.

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';

@Directive(
  selector: ''
      '[dynamicRequired][ngControl],'
      '[dynamicRequired][ngFormControl],'
      '[dynamicRequired][ngModel]',
  providers: const [
    const Provider(
      NG_VALIDATORS,
      useExisting: DynamicRequiredValidator,
      multi: true,
    ),
  ],
)
class DynamicRequiredValidator implements Validator {
  @Input('dynamicRequired')
  bool isRequired;

  @override
  Map<String, dynamic> validate(AbstractControl control) {
    return isRequired && (control.value == null || control.value == '')
        ? {'required': true}
        : null;
  }
}

use it like this

@Component(selector: 'hello-world', template: '''
    <form #myForm="ngForm">
      <input [dynamicRequired]="modelIsRequired"
             [(ngModel)]="model" 
             ngControl="model">
      <input type="submit" [disabled]="!myForm.valid">
    </form>
    <button (click)="toggleRequired()">
      toggle
    </button>
  ''', directives: const [formDirectives, DynamicRequiredValidator])
class HelloWorldComponent {
  bool modelIsRequired = true;
  String model;

  void toggleRequired() {
    modelIsRequired = !modelIsRequired;
  }
}

[zarisi]

Tried it today, worked like a charm! Thanks.

Shouldnt this be the way required works by default?

[alorenzen]

This should be the way things work. Making the change now, so it will be in 5.0

[Cododoc]

It does not work at dart version 2.1.0 and angular_forms 2.0.0

Dart VM version: 2.1.0 (Tue Nov 13 18:22:02 2018 +0100) on "windows_x64"
angular_forms 2.0.0
angular 5.0.0
Chrome