У меня угловая форма.
<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')"
К сожалению, я не могу заставить эти условия работать. Когда я использую условия по отдельности, они работают, но когда я пытаюсь использовать их одновременно, отключенный атрибут не изменяется соответствующим образом.
Надеюсь, условия понятны. Буду признателен, если кто-нибудь прольет свет на эту тему.
Ваше здоровье, Джонни





Если я правильно понимаю, вы должны изменить А ТАКЖЕ на ИЛИ:
(clientManagementDetailForm.invalid || clientManagementDetailForm.pristine)
|| isDisabled('ClientManagement','Edit')
Поскольку вам не нужна кнопка отправки, если форма недействительна ИЛИ, у пользователя нет разрешения на редактирование.
Да, я согласен, но он мог бы оставить их там, чтобы помочь с чтением
Еще лучше, я бы сказал, что абстрагирую все логическое предложение к переменной с подходящим именем, так как я уверен, что оно будет использоваться повторно, и оно становится длинным.
@javascript-отстой, как я могу абстрагироваться от всего логического предложения?
@Johnny, вы могли бы создать метод в файле .ts ваших компонентов с именем что-то вроде canSave() , и в методе вы могли бы вернуть оцениваемое логическое значение, это сделало бы ваш html более читаемым, потому что вы могли бы просто написать [disabled] = "canSave()"
@JakobEm Если вы хотите понять, почему вызов функций из шаблона — плохая идея, добавьте console.info внутри canSave функции?
@Drenai Я знаю, что вы имеете в виду, но я думаю, что логическое значение в любом случае оценивается так часто, поэтому я не думаю, что это будет иметь большое значение для производительности. Поправьте меня если я ошибаюсь
@JakobEm это может вызвать неожиданные проблемы - stackoverflow.com/questions/37876533/…
Во-вторых, и скобки можно снять с первого условия.