The disabled attribute appears to be ineffective in an Angular reactive form

In my Angular reactive form, I have an email field that I want to disable when the form is in edit mode instead of add mode. The code I am using for this is:

disabled: typeof user.user_id === 'string'

When I debug the modelToForm method and check the value of typeof user.user_id === 'string, it returns true which should work according to the logic. However, the field remains enabled even though it should be disabled based on this condition. Interestingly, if I manually set it to 'disabled: true', then the field is correctly disabled. Has anyone encountered a similar issue before?

    public modelToForm(user: UserModel): FormGroup {
        return this.fb.group({
            firstName: [user.first_name, [
                Validators.required,
                Validators.maxLength(UserFormHelper.maxLengthName),
                UserFormHelper.validateWhitespace
            ]],
            email: [{value: user.email, disabled: typeof user.user_id === 'string'}, [
                Validators.required,
                Validators.maxLength(UserFormHelper.maxLengthEmail),
                Validators.pattern(UserFormHelper.emailPattern)
            ]],
        });
    }

Answer №1

I believe I understand now! The disabled setting on form initialization is fixed, correct? So you would have to adjust it manually when the condition changes?

control.deactivate()
control.activate()

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

How to locate a specific object by its ID within a JSON structure embedded in an HTML template

I am currently working on the page where I display posts. Within my controller, I have: export class PostsComponent implements OnInit { posts$: Object; users$: Object; constructor(private data: DataService) { } ngOnInit() { this.data.getPo ...

Learn the steps to establish a one-to-many relational record with the help of Node.js and Sequelize-Typescript

Currently, I am working on Nodejs with sequelize-typescript to develop a CRUD system for a one-to-many relationship. Unfortunately, I have encountered an issue with my code that I cannot seem to pinpoint. While I am able to retrieve records successfully us ...

Configuring Angular routes based on service method invocation

I have my routes configured in @NgModule. I also have a service that determines which parts of the application to display based on specific conditions. I need to call this service and adjust the routes according to its output. Issue: The route configurati ...

Encountering a problem while attempting to compile an Angular 8 application using the "ng build" command

Error Log Below: An error occurs while the application is running with ng-serve, but ng build throws a different error. Generating ES5 bundles for differential loading... Browserslist: caniuse-lite is outdated. Please run the following command npm u ...

Problems encountered with Bootstrap navbar-nav while utilizing ngFor

Greetings, I am currently utilizing bootstrap v4.0.0 in my project. I have noticed that when displaying menus using navbar-nav and implementing ngFor, the bound property seems to be called continuously - is this the intended behavior? Below is a snippet o ...

Enhancing native JavaScript types in TypeScript 1.8 with the power of global augmentation

Currently, I am working on expanding the capabilities of native JavaScript types using the new global augmentation feature in TypeScript 1.8, as detailed in this resource. However, I'm encountering difficulties when the extension functions return the ...

Local hosting of Angular 8 application with Universal and i18n integration encountered issues

I have integrated Angular Universal into my existing project that already has i18n. I am able to build the project, but facing issues while trying to serve it. Currently, I am encountering the following error: Cannot find module '/home/my-user/my-ap ...

The error message "Property does not exist on type Object from subscribe" indicates that

When using forkJoin to make multiple http calls, I encountered the error error TS2339: Property 'data' does not exist on type 'Object' forkJoin(this.userservice.getUser(), this.userservice.getDashboard()).pipe( map(([userData, dash ...

Looking to establish a connection between Azure blob storage and an Angular application using a NodeJS Express application

I am looking to implement a secure way of uploading files from an Angular web app to Azure blob storage. Instead of directly uploading files from the frontend, I want to send them first to a NodeJS app via an Express API, and then have the backend handle ...

Unexpected Union Type Return from Apollo Server

When I call my resolver to return a union type (either a User or an object with a message key and value of type String, such as my UserNotFoundError type), it always comes back with "__typename": "User". Why is this happening and how ca ...

Rule in ESLint mandating return type for arrow functions

I currently have the following arrow function within my Angular project: this.httpClient.get('url').subscribe((response)=>{ }); It is important to note that ESLint should detect an error in the above code due to not specifying a return type. ...

The activation of [routerLinkActive] triggers an error related to the data.split function

In my lazy loaded module, I have implemented simple routing as shown below: <div id="nav"> <div class="nav-content"> <div class="nav-item" [routerLink]="'basic'" [routerLinkActive]="active-nav"> <span ...

Using a union type annotation when passing into knex will result in the return of an unspecified

Knex version: 2.5.1 Database + version: postgres15 When passing a union typescript definition into knex as a type annotation, it returns the type any. However, by using type assertion as UserRecord, we can obtain the correct UserRecord type. It is my un ...

Leveraging Google Analytics with Angular 4 and beyond

Having trouble integrating Google Analytics with Angular 4? Can't seem to find the @type for ga.js in ts? Here's a quick fix that I implemented in every component: declare let ga: any; How did I solve it, you ask? I created a function to dyna ...

RxJS: Ensure Observables emit values sequentially, waiting for the completion of the previous Observable

In my current project, I have been working on implementing a unique Angular structural directive. This directive is designed to read and store the text content of an HTML element along with all its children, remove the contents upon AfterViewInit, and then ...

After compiling, global variables in Vue.js 2 + Typescript may lose their values

I am currently working on a Vue.js 2 project that uses Typescript. I have declared two variables in the main.ts file that I need to access globally throughout my project: // ... Vue.prototype.$http = http; // This library is imported from another file and ...

Angular2: Property binding authorization is not implemented in any directive within an embedded template

I created a directive in Angular 2, but it is not working and returning a template parse error. Directive code : import { Directive, Input } from '@angular/core'; import { TemplateRef, ViewContainerRef } from '@angular/core'; import { ...

Trouble arises when attempting to import React JSX project/modules from npm into an AngularJS TypeScript module

In the process of developing a proof-of-concept React framework/library, I aim to create a versatile solution that can be utilized in both React and AngularJS applications. To achieve this goal, I have initiated two separate projects: - sample-react-frame ...

Using alternate variables in the watchQuery() function in Apollo Angular will generate the cached data

Currently, I am implementing a feature in my project that allows users to access and analyze data based on various parameters such as year, location, and gender. Below is the code snippet that I have developed for this feature: this._querySubscription = ...

Exploring techniques to retrieve data from Json Array in Angular using Firebase documentation

this.currentUser$=this.afs.doc('users/'+this.authState.uid).valueChanges().pipe(); When I include it in my component.html file like this: {{ currentUser$|async|json}} The output I get is as follows: { "photoUrl": "", &qu ...