I'm creating an event emitter related to an input text:

<input
            type="text"
            id="foo"
            [formControl]="control"
            autocomplete="off"

        />

with:

@Output()
textChange = new EventEmitter<string>();

public readonly control = new FormControl({value:'', disabled: this.disabled}, Validators.required);

Initialized like this:

  ngOnInit(): void {
    this.control.valueChanges
         .pipe(
             filter(text => {
                 return text.length == 0 || text.length >= 2;
             }),
             debounceTime(300),
             distinctUntilChanged()
         )
         .subscribe(text => this.textChange.emit(text));
 }

Strangely, if the text is populated I get:

textChange: "foooo"

but, if empty, I get:

textChange: {name: "textChange", args: ""}

while I would expect only "".

Why is that?

CodePudding user response：

As far as I know binding to native stuff is not the best practice. Use reactive forms. Check this example

• https://stackblitz.com/edit/angular-ivy-g7j7vc?file=src/app/hello.component.ts
• https://stackblitz.com/edit/angular-ivy-g7j7vc?file=src/app/app.component.ts
• https://stackblitz.com/edit/angular-ivy-g7j7vc?file=src/app/app.component.html

CodePudding user response：

Its better to use reactive forms as its suggested in another answer. In that case you will have a better control what is happening (also testing is much easier). There you can specify init values for your input component, you can add custom sync/async validators and much more...

In your case here:

if you change :

inputChanged(event:any) {
    this.valueChanged.next(this.value);
  }

to this:

inputChanged(event:any) {
    this.valueChanged.next(event.target.value);
  }

It should work.