Динамические проверки в Angular 7: enable () и setValidators в зависимости от флагов, вызванных изменениями

Question

Мой последний Angular проект был давным-давно, я работал с VueJS.Теперь я вернулся и реализовал реактивную форму с некоторыми условными полями в Angular 7.

Мое решение ниже работает, я могу включить поля или установить валидаторы в зависимости от флагов.Но почему-то мне не нравится это решение, оно слишком длинное и не интуитивно понятное.Никто не может интуитивно понять, что вы должны отключить поле, чтобы отключить валидаторы.Может ли эксперт по Angular / TypeScript помочь мне оптимизировать этот код или сделать все правильно ?

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

Краткое объяснение: Если область действия локальна или шаблон, будет новое обязательное поле.Если область действия глобальна, то это поле исчезает, и его валидатор будет деактивирован.

Answer 1

Дополняю мой комментарий с помощью директивы Как сделать отключенную реактивную форму редактируемой в Angular2

Одиноко, вам не нужно менять валидаторы, используя setValidators, а директива - кто включил /отключил контроль.Я думаю, что это более "читабельно"

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

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

})