2 ngModel return same value when use ControlValueAccessor in Angular

Question

I have component CustomInputComponent

<div>
  <input
    #input="ngModel"
    name="input"
    [(ngModel)]="value"
    (ngModelChange)="onInputChange()"
  />
</div>

@Component({
  selector: 'app-custom-input',
  templateUrl: './custom-input-component.html',
  styleUrls: ['./custom-input-component.less'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInputComponent),
    multi: true,
  }],
})
export class CustomInputComponent implements ControlValueAccessor {
  value= '';

  onChange: (value: string) => void = () => {};
  onTouched: () => void = () => {};

  writeValue(value: string): void {
    this.value = value;
  }

  registerOnChange(fn: (value: string) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  onInputChange(): void {
    this.onChange(this.value);
    this.onTouched();
  }
}

In other Component

<app-custom-input
  #firstInput="ngModel"
  [(ngModel)]="firstInputValue"
></app-custom-input>
<app-custom-input
  #secondInput="ngModel"
  [(ngModel)]="secondInputValue"
></app-custom-input>
<div>
  First touched: {{firstInput.touched}}
  <br/>
  Second touched: {{secondInput.touched}}
</div>

When I enter one of the two app-custom-inputs, the firstInput and secondInput will change to the data of the newly entered input. But with firstInputValue and secondInputValue, the correct value of the input word is displayed

I want to enter data into firstInput, firstInput.touched must be true but secondInput must still be false

you shouldn't use name="input" for your case. it is a standard html form behavior that "name" means that form elements refer to some field in the form and in case it is the same - fields mean the same field in the form. angular tries to follow that in its directives as well — Andrei
– Andrei, Commented Jul 2, 2024 at 11:53
@NarenMurali Thank you for your comments I tried creating a new project and didn't have that problem anymore But I still want to use the old project so I found a way to add a touched variable in CustomInputComponent and I can get it out using firstInput.valueAccesser.touched (the variable has just been declared). — TCNJK
– TCNJK, Commented Jul 2, 2024 at 12:39
@TCNJK replicate the issue on the stackblitz and share back! else try to find out how the two code differs — Naren Murali
– Naren Murali, Commented Jul 2, 2024 at 12:43
@NarenMurali, it was fixed when I added ngDefaultcontrol to app-custom-input <app-custom-input #firstInput="ngModel" [(ngModel)]="firstInputValue" ngDefaultcontrol ></app-custom-input> but I still don't know the reason, — TCNJK
– TCNJK, Commented Jul 3, 2024 at 12:32

Eliseo · Accepted Answer · 2024-07-03 09:08:46Z

0

I imagine can be a problem with the name property of the input (that solve in newer versions of Angular).

You can define your component like

let index_custom_input:number=0; //<--add this line

@Component({
....
template: `<div>
  <input
    #input="ngModel"
    [name]="name" //<--see the binding "name"
    [(ngModel)]="value"
    (ngModelChange)="onInputChange()"
  />
</div>`,
})
export class CustomInputComponent{
   name='input'+(index_custom_input++) //<--declare name here
}

answered Jul 3, 2024 at 9:08

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

1 Comment

TCNJK Over a year ago

Thanks for your answer My problem was solved by adding ngDefaultcontrol to <app-custom-input> tag

Collectives™ on Stack Overflow

2 ngModel return same value when use ControlValueAccessor in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related