Disable input (Angular)

Question

I need to set a value onInit and disable this input. I tried something like this:

this.authenticationService.get().subscribe((user) => 
  this.form.controls.recruiter.setValue(`${user.firstName} ${user.lastName}`).disable()
);

but have error that Property 'disable' does not exist on type 'void'. But If I rewrite it separately like this:

this.authenticationService.get().subscribe((user) => {
  this.form.controls.recruiter.setValue(`${user.firstName} ${user.lastName}`);
  this.form.controls.recruiter.disable();
});

the error is gone. Can someone explain why so and maybe there would be a better way how to make it.

setValue is used to set the current formControl value dynamically and it's return nothing. disable method exist on formControl object, that's why you are getting error. — Chellappan வ
– Chellappan வ, Commented Jun 18, 2020 at 11:15

Barremian · Accepted Answer · 2020-06-18 11:25:08Z

1

The first variant didn't work because the setValue() method returns nothing. So there would be no property to call the disable() function on.

If you need to be sure that the values are set before disabling it, you could try to subscribe to valueChanges() observable with take(1) operator piped in.

this.authenticationService.get().pipe(
  switchMap((user) => {
    this.form.controls.recruiter.setValue(`${user.firstName} ${user.lastName}`);
    return this.form.controls.recruiter.valueChanges.pipe(take(1));
  }
).subscribe(
  null,
  null,
  () => { this.form.controls.recruiter.disable() }   // <-- trigger in `complete` callback to be sure
);

edited Jun 18, 2020 at 11:25

answered Jun 18, 2020 at 11:17

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Disable input (Angular)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related