Unable to deactivate buttons (reactive forms)

I am facing a simple issue with my reactive form and validations. My goal is to have the button disabled until the form group is valid.

Even though I thought I had the solution by using [disabled]="!fg_profile", the button remains enabled. When checking the console output upon clicking the button, it shows that the formgroup is invalid (false), yet the button stays enabled...

<button type="button" class="btn btn-primary pull-right"
                (click)="updateProfile(fg_profile.value)"
                [disabled]="!fg_profile">{{'control.save' | translate }}</button>

Here is my button code.

this.fg_profile = this.fb.group({
    password: [null, [Validators.minLength(6)]],
    password_confirm: [null, [Validators.minLength(6)]],
    email: [null, [emailValidator, Validators.minLength(6)]],
    jabber: [null, [emailValidator, Validators.minLength(3)]],
    current_password: [null, [Validators.required, Validators.minLength(6)]]
  },
  {
    // check whether our password and confirm password match
    validator: PasswordValidation.passwordMatchValidator
});

This is my validation logic in TypeScript.

Despite trying [disabled]="true" as well, the button remains enabled. What could be causing this issue?

javascriptbuttonbootstrap-4angular6

Answer №1

Have you attempted linking the disabled attribute to fg_profile.valid? This should resolve the issue as long as your validation logic is accurate.

I didn't notice any use of FormControl in your logic. Make sure to incorporate this and import the essential Form dependencies such as FORMGROUP, FORMCONTROL, and VALIDATORS from @angular/forms.

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

Information stored in IndexedDB is not retained permanently

My journey to explore various web technologies (such as HTML, CSS, JavaScript) led me to create a simple web application. To enhance the functionality of my app, I integrated IndexedDB for data storage and operations like insert, update, get and delete. H ...

javascripttypescriptpersistenceindexeddb

The JQuery keydown event will only be activated once unless another action occurs

I am attempting to display a font awesome '?' symbol after each element that has the ".info" class when the user presses and holds the "alt" key. It seems to be functioning properly, but when I release the "Alt" key and try to press it again, not ...

javascriptjqueryhtml

Embed an HTML file within another HTML file

I'm having trouble trying to include an Html file into another Html file. Can anyone offer some assistance? <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" ...

javascripthtmljquerybootstrap-4include

Create a dynamic HTML table in React by leveraging arrays

I am working with two arrays: headings=['title1','title2'] data=[['A','B'],['C','D']] How can I efficiently convert this data into an HTML table that is scalable? title1 title2 A B ...

javascriptreactjs

When incorporating Bootstrap into my React code, it is essential to enclose adjacent JSX elements within a wrapping tag

Line 15:1: Error detected while parsing: Adjacent JSX elements must be surrounded by a parent tag. If you intended to use a JSX fragment <>...</>, please do so. 13 | //crossorigin></script> 14 | > 15 | < ...

javascriptreactjsreact-nativenavbar

React component stuck in endless loop due to Intersection Observer

My goal is to track the visibility of 3 elements and update state each time one of them becomes visible. Despite trying various methods like other libraries, useMemo, useCallback, refs, etc., I still face challenges with my latest code: Endless loop scenar ...

javascriptreactjstypescriptnext.jsintersection-observer

Prevent scrolling within input field

I have a text entry field with background images that separate each letter into its own box. Unfortunately, an issue arises when I reach the end of the input: the view automatically scrolls down because the cursor is positioned after the last letter enter ...

javascripthtmlcssinputscroll

Steps for updating a property of an object using a function

I am working on a function that resets the deepest value of an object with variable depth to 0. I need this function to update the object's property outside of its scope. var data = { '1': { '10000': { ...

javascriptnode.jsrecursionpass-by-reference

Searching in MongoDB using regular expressions, starting with the JavaScript driver in a Node.js environment

Currently, I am utilizing the JavaScript MongoDB driver from Node.js. My objective is to execute this query within my JavaScript function: db.mycollection.find({Zip:/^94404/}); Upon running the above query, the mongo client successfully retrieves 8 docum ...

javascriptregexnode.jsmongodb

"Bridging the Gap: Establishing Communication Among Backbone Marionette Views

I recently started working as a junior javascript developer at a company that utilizes Backbone and Marionette. My first project involves implementing searching, filtering, and sorting capabilities in a collection based on user input. The challenge lies in ...

javascriptjquerybackbone.js

Encountering the error message "Trying to access 'getAttribute' of an undefined element" when looping through the elements

Having trouble understanding why I'm encountering an error with the last element in my loop. I have looked at other questions on stackoverflow, but none of them seem to address my particular issue. I am attempting to retrieve a list of anchor (a) ele ...

javascripthtmlloops

A guide on how to split the Bootstrap 4 card-body class into distinct columns

I currently have a bootstrap 4 card layout that looks like this: <div class="card-body"> <img src="{{asset('images/yimage.jpg')}}" alt="..." class="rounded-circle"> <p>This is ...

cssbootstrap-4

Creating a Wordpress Metabox that utilizes radio inputs generated with Javascript instead of the traditional checked() function in Javascript as an alternative

Despite my efforts to find a solution on various forums, I am still stuck with this issue without making any progress. The code snippet below contains two Radio inputs. These inputs are generated on the post edit page of Wordpress CMS and their values com ...

javascriptphpjquerywordpress

React is re-rendering the identical div elements once more - Delving into the concept of

After reading about reconciliation in the React documentation, an interesting scenario crossed my mind. In my examples, I have code that involves using a button element to toggle a boolean value on click event. Based on this value, the code utilizes a ter ...

javascriptreactjs

Clone the "big" div element and insert data within it

Is there a way to dynamically generate div elements while looping through a JSON array? I have various data items that I need to display in separate thumbnails within a row. I am looking for a template structure like the following: for(var i = 0; i < ...

javascripthtmlangularjs

Preserving the Selected Date on the Calendar Even After the PHP Variable is Passed

I am currently using the calendar code below with a slight modification that I implemented. However, I have encountered an issue where when I select a date, the calendar successfully highlights the selected date. But once I pass this selected date along ...

javascriptphp

The Material UI Tooltip fails to display when placed within a unique custom Modal component

Check out the way I've defined my custom Popup component: function Popup({ show, setShow, content }) { const popupRef = useRef(null); useEffect(() => { if (show) { popupRef.current.style.display = "block"; } else { popupRef. ...

javascriptreactjsmaterial-uimodal-dialogpopup

Integrate an input field with a copy function similar to the GitHub clone view

Can anyone help me create a view with a tooltip similar to the one on Github? You can see the example here: https://i.sstatic.net/iBSof.png I attempted to use CSS but couldn't quite replicate the exact UI. Here is my current CSS code: [tooltip] { ...

javascripthtmlcss

Pass an item along with its superclass using express

Is there a way to send an object from an express server and then check the instanceof of that object on the receiving end? I am working on integration tests for express and need to verify the instanceof of the response body. Unfortunately, it seems like t ...

javascriptnode.jsexpress

One issue that may arise is when attempting to use ngOnDestroy in Angular components while rearranging user transitions

Encountered an issue recently with Angular - when the user navigates from component A to component B, component A remains active unless ngOnDestroy is triggered. However, if the user visits component B before going to component A and then leaves, ngOnDes ...

javascriptangularangularjstypescript