CODEWITHSUNDEEP
angularangular4-formsangular-template
mathiasF
mathiasF

Reputation: 267

Create an event in an input (angular 4+)

I apologize in advance for my English and hope to make myself understood.

I have a form and I would like the user to add a date in an input, and the / of I add by myself. The code works very well because it is displayed correctly in the console. But it is impossible to reproduce this in the input(type = text).

here is the component.ts: 

ngOnInit() {
 this.changes()
 }

changes() {
this.petForm.controls.birthday.valueChanges
.subscribe(res => {
  const resLength = res.length
  if(resLength < 6 ) {
    res.replace(/(..)/g, '$1/')
  }
})
}

In the console no problem here's what it looks like:
enter image description here

Here the template: 

<div class="form-group">
  <label for="birthday" class="size0">{{ 'PARTNER.bday_placeholder' | 
  translate}} *</label>
  <input 
  class="input--default input__signup__default" 
  formControlName="birthday" 
  type="text" 
  placeholder="{{'PARTNER.bday_placeholder' | translate}} *"
  required>  
</div>

I hope I was able to explain my problem and that you were able to understand me. Thank you to those who are trying to solve this small problem.

Upvotes: 0

Views: 428

Answers (2)

Jecfish
Jecfish

Reputation: 4189

For reactive form, you cannot just update the value like how you do it. Instead of

res.replace(/(..)/g, '$1/')

Should be:

this.petForm.controls.birthday.setValue(res.replace(/(..)/g, '$1/'), {
      emitEvent: false
    });

Take note of the setValue second params, I pass in emitEvent: false to not trigger value changes event. Else your code might end up infinite loop.

Example url: https://stackblitz.com/edit/angular-amqta3

Upvotes: 1

Vega
Vega

Reputation: 28708

Remove the subscription and try this:
HTML:

<input .... #birthday (input)="birthday.value=changeValue(birthday.value)" ....>

Typescript:

changeValue(value){
  const resLength = value.length;
  if(resLength < 6 ) {
    return value.replace(/(..)/g, '$1/');
  }
  return value;
}

Upvotes: 1

Related Questions