0

My last Angular project was a long time ago, I've worked with VueJS meanwhile. Now I am back and implemented a reactive form with some conditional fields in Angular 7.

My solution below works, I can enable fields or set validators dependend on flags. But somehow I don't like this solution, it is too long and not intuitive. No one can intuit, that you have to disable a field to disable validators. Can an Angular/TypeScript expert help me to optimize that code or do it right way? 

onChangeType(scope: string) {
    console.log(scope);
    this.myForm.get('riskType').disable();
    this.myForm.get('chancheType').disable();

    if (scope === 'local') {
    this.flags.isScopeLocal = true;
    this.flags.isScopeTemplate = false;
    this.flags.isScopeGlobal = false;
    this.myForm.get('chancheType').enable();
    this.myForm.get('chancheType').setValidators(Validators.required);
    } else if (scope === 'template') {
    this.flags.isScopeTemplate = true;
    this.flags.isScopeLocal = false;
    this.flags.isScopeGlobal = false;
    this.myForm.get('riskType').enable();
    this.myForm.get('riskType').setValidators(Validators.required);
    } else {
    // global
    this.flags.isScopeLocal = false;
    this.flags.isScopeTemplate = false;
    this.flags.isScopeGlobal = true;
    this.myForm.get('riskType').disable();
    this.myForm.get('chancheType').disable();
    }
}

Short explenation: If scope is local or template there will be a new reqired field. If scope is global then disappears this field and its validator will be deactivated.

  • If a control is not enabled, not check the validation (e.g. all inputs disabled, the form is valid). For disabled a control, you can not use [disabled]="..." nor [attr.disabled], but you can use a directive https://stackoverflow.com/questions/47937639/how-to-make-a-disabled-reactive-form-editable-in-angular2 – Eliseo Feb 04 '19 at 14:16
  • thank you @Eliseo but, that is not my problem,.. –  Feb 04 '19 at 14:17

1 Answers1

0

Complementary my comment using a directive How to make a disabled reactive form Editable in Angular2

Lonely, you needn't change the validators using setValidators, and the directive is who enabled/disabled the controls. I think is more "readable"

<input formControlName="riskType" [enabledControl]="scope=='local'">
<input formControlName="chancheType" [enabledControl]="scope=='template'">

myForm=this.fb.group({
     riskType:['',Validators.required],
     cacheType:['',Validators.required],

})
Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • big problem with AngularMaterial: `Can't bind to 'enabledControl' since it isn't a known property of 'mat-select'.` –  Feb 11 '19 at 12:51
  • Lonely, You need import in your main.ts the directive, More, take account that the directive is only apply a NgControl (one input with [(ngModel)] or a input with FromControl or FormControlName). see https://stackblitz.com/edit/angular-tq4x4r?file=app%2Fselect-disabled-example.html. Really if you use material you can use directly the property [disabled] – Eliseo Feb 11 '19 at 14:15