Angular: не получать ссылку на первичный/недействительный статус формы внутри директивы

У меня есть директива hasPermission, которая используется внутри компонента. Функция этой директивы состоит в том, чтобы проверить разрешение, если его нет, а затем отключить кнопку, но в тот момент, когда я вношу какие-либо изменения в поля формы, такие как добавленный текст, он снова включает кнопку, и это происходит из-за свойства [disabled], которое ищет нетронутые формы/ недействительный статус.

Как я могу управлять этим?

Я хочу сначала проверить наличие разрешений, если они есть, тогда появляется только этот нетронутый/недействительный. Пожалуйста, направляйте.

Если я получу статус нетронутой/недействительной внутренней директивы этой формы, я считаю, что мы можем с этим справиться, но как получить ее внутри, я попробовал некоторые решения, используя DoCheck/Host и т. д., но ни один из них не дал мне ссылку на форму внутри директивы.

Я не хочу использовать nativeElement (пока кто-нибудь не скажет, что это единственный способ :))

Angular: не получать ссылку на первичный/недействительный статус формы внутри директивы

Образец кода

   import {
    Directive,
    OnInit
} from '@angular/core';
import {
    NgForm
} from '@angular/forms';
@Directive({
    selector: '[haspermission]'
})
export class HaspermissionDirective implements OnInit {
    constructor() {
        ....
    }
    ngOnInit() {
        this.someService.getCurrentUser().subscribe(response => {
            this.store(response);
        });

    }

    store(data: IUser) {
        this.roles = JSON.parse(data.role);
        //.....doing some logic to calculate permissisons
        var hasPerm = this.roles.find(o => (o.RoleCode in permConfig.permission));
        if (!hasPerm) {
            this.element.nativeElement.disabled = true;
        }
    }
}

Что вы ожидаете - код angular или angularJs? Также лучше предоставить текущий код директивы

Petr Averyanov 08.02.2019 15:03

добавлен пример кода

Dev G 08.02.2019 15:39
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
2
197
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Использование может использовать свойство exportAs в декораторе Directive. Который будет предоставлять экземпляр директивы appHaspermission.

The exportAs takes the name under which the component instance is exported in a template.

appHaspermission.Directive.ts

import { Directive, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
@Directive({
  selector: '[appHaspermission]',
  exportAs: 'hasPermission'
})
export class HaspermissionDirective implements OnInit {
  hasPermission = false;
  constructor() {

  }
  ngOnInit() {
    this.hasPermission = true;
  }
}

Затем создайте локальную переменную на своей кнопке и назначьте ее экспортированной директиве hasPermission, чтобы вы могли получить доступ к свойствам директивы из шаблона.

<form>
    <input type = "text" ngModel name = "name" >
 <button #ref = "hasPermission" appHaspermission  [disabled] = "ref['hasPermission'] && (client.pristine || something else)" >Enable</button>
</form>

Пример:https://stackblitz.com/edit/angular-pebven

Круто, позвольте мне попробовать это, а затем за исключением этого в качестве ответа :)

Dev G 08.02.2019 15:29

Не могли бы вы взглянуть на мой код выше и предложить, если логика для расчета разрешения находится в правильном месте? я использую магазин

Dev G 08.02.2019 15:42

Я так думаю, и я не хороший рецензент кода. И место, где вы ставите метод магазина, правильное

Chellappan வ 08.02.2019 15:54

Нужно ли добавлять #ref = "hasPermission" к кнопке?

Dev G 08.02.2019 16:54

да, чтобы вы могли получить экземпляр директивы haspermission

Chellappan வ 08.02.2019 16:57

А, понял, это ссылочная переменная. В некоторых случаях мы используем его напрямую с #

Dev G 08.02.2019 17:18

Другие вопросы по теме