Angular: в директиве отсутствует указание на нетронутый / недействительный статус формы - PullRequest
Новая
       7

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

0 голосов
/ 08 февраля 2019

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

Как мне это сделать?

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

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

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

enter image description here

Пример кода 

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

1 Ответ

0 голосов
/ 08 февраля 2019

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

ExportAs принимает имя, под которым экземпляр компонента экспортируется в шаблон.

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

...