CODEWITHSUNDEEP
angularformsdisable
Carolina
Carolina

Reputation: 250

Disable input (Angular)

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.

Upvotes: 0

Views: 94

Answers (1)

Barremian
Barremian

Reputation: 31105

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
);

Upvotes: 1

Related Questions