Как использовать 3 разных условия одновременно для отключения атрибута в Angular 7

У меня угловая форма.

<form class = "p-16" name = "poMaterialDetailForm [formGroup] = "poMaterialDetailForm">

Внутри формы у меня есть кнопка сохранения.

<button mat-raised-button 
        class = "save-poMaterialDetail-button ml-32 mr-8"
        [disabled] = "poMaterialDetailForm.invalid || poMaterialDetailForm.pristine"
        <span>SAVE</span>
</button>

Атрибут disabled позволяет мне отключить кнопку, когда в форме нет изменений. Если значения формы изменены, кнопка сохранения становится активной.

Я только что добавил функцию разрешения пользователя, и кнопка сохранения также отключена для пользователей, у которых нет доступа к редактированию.

<button mat-raised-button
        class = "save-clientManagementDetail-button ml-32 mr-8"
        [disabled] = "isDisabled('ClientManagement','Edit')"
        *ngIf = "pageType ==='edit'" (click) = "saveClientManagementDetail()">
    <span>SAVE</span>
</button>

Теперь я хочу использовать обе функции для отключенного атрибута. Вот мое условие:

[disabled] = "(clientManagementDetailForm.invalid || clientManagementDetailForm.pristine) 
&& isDisabled('ClientManagement','Edit')"

К сожалению, я не могу заставить эти условия работать. Когда я использую условия по отдельности, они работают, но когда я пытаюсь использовать их одновременно, отключенный атрибут не изменяется соответствующим образом.

Надеюсь, условия понятны. Буду признателен, если кто-нибудь прольет свет на эту тему.

Ваше здоровье, Джонни

Тестирование функциональных 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
2
0
111
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Если я правильно понимаю, вы должны изменить А ТАКЖЕ на ИЛИ:

(clientManagementDetailForm.invalid || clientManagementDetailForm.pristine) || isDisabled('ClientManagement','Edit')

Поскольку вам не нужна кнопка отправки, если форма недействительна ИЛИ, у пользователя нет разрешения на редактирование.

Во-вторых, и скобки можно снять с первого условия.

user11390576 28.04.2019 23:15

Да, я согласен, но он мог бы оставить их там, чтобы помочь с чтением

Jakob Em 28.04.2019 23:16

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

user11390576 28.04.2019 23:19

@javascript-отстой, как я могу абстрагироваться от всего логического предложения?

Johnny 28.04.2019 23:35

@Johnny, вы могли бы создать метод в файле .ts ваших компонентов с именем что-то вроде canSave() , и в методе вы могли бы вернуть оцениваемое логическое значение, это сделало бы ваш html более читаемым, потому что вы могли бы просто написать [disabled] = "canSave()"

Jakob Em 28.04.2019 23:43

@JakobEm Если вы хотите понять, почему вызов функций из шаблона — плохая идея, добавьте console.info внутри canSave функции?

Drenai 29.04.2019 00:16

@Drenai Я знаю, что вы имеете в виду, но я думаю, что логическое значение в любом случае оценивается так часто, поэтому я не думаю, что это будет иметь большое значение для производительности. Поправьте меня если я ошибаюсь

Jakob Em 29.04.2019 00:18

@JakobEm это может вызвать неожиданные проблемы - stackoverflow.com/questions/37876533/…

Drenai 29.04.2019 00:32

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