value and formControlName interaction

[tawny robin]

  <app-custom-input
    [value]="someValue$.value" 
    formControlName="name"
  ></app-custom-input>

I'm trying to change the shown value of an input with the value, but it seems like the value of formControlName is not allowing it. The interaction is also not consistent, sometimes it displays the name, most of the the times the id (formControlName value).

[lusty marten]

sometimes it displays the name, most of the the times

Explain clearly what you expect and what happens.

app-custom-inputis your own personal component: we can't help with just the name of a custom component.

Reactive Forms are meant to manage both applying a value on a field and retrieving it, why do you pass a value also here?

[true scarab]

Is someValue$ a BehaviorSubject on the component or does it come out of a service or something? If you just want to update the form state from the component you can do it on the FormGroup via patchValue, if it's from outside you can do the same thing but you need a subscription. You might also consider doing template driven forms, then you can do

<app-custom-input
    [ngModel]="someValue$.value" 
    (ngModelChange)="nameChanged($event)"
/>

[tawny robin]

Sorry this could be reproduced with just this:

<input
  [value]="selectedLeaderName$.value"
  (input)="searchQuery$.next(search.value)"
  formControlName="leader"
/>

What I expect to happen: The shown value to the end user would be the [value], the actual value of the formControlName (id in this case) would be handled programmatically and would not be shown to the end user.

What is currently happening: When I do change the value of my input, I get it from my search input component, which outputs the name and ID, so in my scenario I'm both receiving the id and name at the same time in here:

<app-search-items
  [searchResults$]="searchResults$"
  (selectedItemId)="guildForm.get('leader')?.setValue($event)"
  (selectedItemName)="selectedLeaderName$.next($event)"
></app-search-items>

Reactive Forms are meant to manage both applying a value on a field and retrieving it, why do you pass a value also here?

I need to show the end-user the value (name in this case) but I need to use the ID for my API request, with my current setup, the form should have the ID, but the shown value should be the name.

[true scarab]

BTW if you're in an OnPush component you might want to do [ngModel]="someValue$ | async" because the view might not update on .value change

[tawny robin]

I have tried doing just that, but the issue still persists

[value]="(selectedLeaderName$ | async) || ''"

[true scarab]

if you're doing reactive forms (formControlName) [value] is not what you want

[tawny robin]

This is me reproducing my issue

[true scarab]

if you want to set the value on a reactive form you need to update it via the FormControl, you can't do that in template alone. If you want to do it in the template you need to use template driven forms (via ngModel)

[tawny robin]

I tried using [value] to try and change what is being shown in the end user, but I still want its actual value to be the id, so I could just pass the form directly in my API

[true scarab]

If you have different data shapes for form and API I'd just manage them separately

[tawny robin]

I used to do this before, but it looked kind off messy. Would this be the best approach, handle them separately?

[true scarab]

the form value/model should be what the user inputs - if they can't change the id don't make it part of the form model, will save you some pain 😄

[lusty marten]

is Reactive Forms mandatory? it' would be easy to solve with ngModel

[tawny robin]

Not mandatory, I would try this approach, as Kamshak also noted, would be adding an update after I have done so

[true scarab]

I used to do this before, but it looked kind off messy. Would this be the best approach, handle them separately?
Don't have the full code but generally that works better - to clean it up try splitting it very clearly and having functions to interface / combine the split state (e.g. prepForApi(formState: FormState, componentState: { guildLeaderId: number }): ApiObject { ... })

idk how much you've worked with reactive patterns but another way to do this is to have a single "big" state as source of truth and then "derive" (basically pick parts) from it for your form state. This works really well with reactive forms

[lusty marten]

Here is an example, mocking the 'query' by a counter: https://stackblitz.com/edit/stackblitz-starters-j7knif?description=An angular-cli project based on @angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, core-js, rxjs, tslib and zone.js&file=src%2Fmain.ts&title=Angular Starter

[true scarab]

are you building the API yourself as well @tawny robin ?

[tawny robin]

Yes I have built the API