The button in Angular 2 remains enabled even after form initialization on IE11

I am currently working on developing a form using Angular2 and PrimeNg. I have implemented a button that should be disabled when the form is not dirty or invalid. Oddly enough, everything functions perfectly in Chrome, but not in IE11. The code snippet for the button: the Modify button remains enabled even when it should be disabled.

<button pButton type="submit" icon="fa-pencil" (click)="modify()"
[disabled]="!form.dirty || form.invalid || 
disableModifyButton" disabled="true" label="Modify"></button>

Does anyone have any suggestions on how to resolve this issue?

angularinternet-explorertypescriptprimeng

Answer №1

Deactivated has a single attribute value, which is deactivated. Give this a try:

[deactivated]="(!form.dirty || form.invalid || disableModifyButton) ? 'deactivated' : null"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason for the absence of Mock Service Worker in a React project that has Typescript enabled?

After attempting to integrate Mock Service Worker into my React project with Typescript support, I encountered errors when running the npm install msw --save-dev command. The terminal displayed the following messages: PS F:\Programming\React Prac ...

javascriptnode.jsreactjstypescriptnpm

What methods can I use to analyze the integrity of the data's structure?

Currently working on an API using NestJS and typeorm. I am in need of a way to verify the format of the data being returned to clients who make requests to it. For instance, when accessing the /players route, I expect the data to have a specific structure ...

javascripttypescripttestingnestjs

Forward and send video types as bytes[] using Spring MVC

I'm currently working on building a video platform using Spring MVC and Angular2. However, I've been facing challenges in making the video play backwards or forwards. Additionally, I haven't been able to configure the rest controller to send ...

javaspringangularspring-mvcspring-boot

Issue with Next.js: Router.push not causing page to refresh

I'm currently developing a next.js page called /page/data/[dataId] (this page is accessed when a user clicks on a link from the page /page/data, where I fetch the list of items through an API). When a user clicks on a button, I make an API call to de ...

reactjstypescriptnext.jsnext-router

In relation to the characteristics of an Angular Component (written in TypeScript) Class

I am attempting to create a circle on a canvas using Angular. I have followed the necessary steps and have a basic understanding of how everything works. Although my IDE is not showing any errors, when I run the code, the console displays an error stating ...

angulartypescriptcanvas

Encountering an Issue with SQLite Integration in Ionic 2: sqlitePlugin Error

Attempting to incorporate the straightforward example provided in Ionic 2 documentation: http://ionicframework.com/docs/v2/native/sqlite/ I tested the example (running a query on a database located within the 'www\test.sqlite' folder of t ...

androidiossqlitecordovaangular

Having trouble with TypeScript Library/SDK after installing my custom package, as the types are not being recognized

I have created my own typescript library using the typescript-starter tool found at . Here is how I structured the types folder: https://i.stack.imgur.com/igAuj.png After installing this package, I attempted a function or service call as depicted in the ...

javascripttypescriptnpm

The modal in Angular15 will automatically show the date decremented by 1 day whenever it is displayed

Every time I open the date field in a modal, it decrements by one day. Here is the associated typescript file: dob!: DatePipe; rescueDate!: string; dateAdded!: string; openEditPetMenu(template: TemplateRef<any>, petId: number, name: string, ...

htmlangulartypescript

Error Encountered: 403 Forbidden Error when Loading PDF in Quill Project using Uploadthing URL

This project is a combination of Next.js with TypeScript, tRPC, MySQL using Prisma, and Pinecone for vector DB. Uploadthing is integrated for PDF uploads. Despite successful upload, there is an issue when trying to open the PDF on the website, resulting in ...

typescriptnext.jsfile-uploadupload

Unable to view the refreshed DOM within the specifications after it has been altered

For my current project, I am working on writing a functional spec that involves using Mocha/JSDOM and making assertions with 'chai'. The specific use case I am tackling is related to the function called updateContent: When this function is exec ...

javascripttypescriptunit-testingmocha.jsjsdom

"Having issues with the ngrx/store initialization; the store is not

My shop has the following reducers : export const centralStampState = { layoutState : layoutReducer, //this one is not initialized eventTabState : eventTabReducer, eventTimelineState: eventTimelineReducer, eventWorkflowState : eventWorkflowReducer ...

angularreduxngrxngrx-store-4.0

Tips for creating an operation within a JSON document?

Today, I am attempting to customize the appearance of my audiobook list. However, when trying to add an aspectRatio key-value pair to each object in my JSON file, I encountered an error. https://i.stack.imgur.com/Qb3TX.png https://i.stack.imgur.com/qTkmx. ...

arraysjsontypescriptreact-nativeobject

Guide to creating two-way data binding using ngModel for custom input elements like radio buttons

I am currently facing an issue with implementing a custom radio button element in Angular. Below is the code snippet for the markup I want to make functional within the parent component: <form> <my-radio [(ngModel)]="radioBoundProperty" value= ...

javascriptangulartypescript

Angular 10 reports that the Cookies and Local Storage are devoid of any data when running on localhost:4200

Why are Cookies and Local Storage not saving data when my Angular10/Express app is running on localhost? When I deploy the application to the server, Cookies and Local Storage work fine. However, when running the app on localhost (:4200 FE, :3000 BE), the ...

angularcookieslocal-storagesession-cookiescsrf

What Type of state does Typescript expect in React?

Whenever I attempt to pass the state in my TypeScript-based React application using any to a function, I encounter a tslint error. no-any: The use of 'any' for type declaration compromises type safety. It is recommended to replace it with a mo ...

typescript

Location of images in Tomcat for an Angular 7 application

I'm facing an issue with image source paths while working on my local Windows machine (Windows 10, Visual Studio Code 1.30.2) and deploying to Tomcat 9 on an Ubuntu 18.04 server hosted on AWS. When I build on Windows using Powershell: ng build --prod ...

angularubuntutomcatdeployment

The Standalone Component does not appear for debugging in webpack:source when utilizing an incompatible version of Node

I have developed two components: https://i.sstatic.net/fSNqa.png However, after running ng serve, I am only able to see one component in the source of the Chrome browser: https://i.sstatic.net/VzdDS.png How can I troubleshoot this standalone component? ...

angulartypescript

Update the Azure AD token with a personalized JWT token

We have developed an Angular 11 frontend application with a .NET 5 backend API. Our system offers two login options: 1. Basic authentication using user details stored in our system with JWT token generation, and 2. Azure AD authentication. During the Azu ...

angularazure.net-5

Troublesome situation encountered when trying to implement React Native/Xcode Release using Typescript

Currently facing an issue while trying to generate a release version of my RN/Typescript project for iOS. I have made some changes to the "Bundle React Native code and images" as follows: export NODE_BINARY=node ../node_modules/react-native/scripts/re ...

typescriptreact-nativerelease

What is the best way to retrieve the current value of an *ngFor loop upon button click?

I have been attempting to retrieve the data.login value of the data item that the user has clicked on the avatar image. Despite my efforts, I have not been able to successfully achieve this through various methods found online. How can I access the current ...

htmlnode.jsangularngfor