We Keep Coding

Angular state not updating until click anywhere

Very new to Angular, and just trying to get a feel for it. I have an input component:
import { Component } from '#angular/core';
#Component({
selector: 'app-input',
templateUrl: './input.component.html',
})
export class InputComponent {
q = '';
queryChange(value: string) {
this.q = value;
}
}
It's html:
<div>
<input #query type="text" (change)="queryChange(query.value)" />
<button>Search</button>
<div>{{ q }}</div>
</div>
When I type into the input, the {{ q }} doesn't update until I click anywhere on the screen, or hit enter. Almost like refocusing. Coming from React I'm confused as to why this happens with the Angular's (change) rather than updating as I type.
My first thought was that maybe because I'm passing the value of the input to queryChange(query.value) instead of passing the event value like I would usually do in React.

I think the problem is about the DOM and not Angular. You should use (input) instead of (change) if you want the event to trigger every time you type.
<input #query type="text" (input)="queryChange(query.value)" />
See this StackBlitz, as well as change and input MDN references. Specifically, MDN says about change:
Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.

Angular 4 Readonly input change detection

I have following code with readonly input. am trying to change the value if this readonly input from TS File, but, I am unable to detect change from any function. Below is the example.
<input type="text" class="form-control" id="field1" name="field1" readonly [(ngModel)]="field1" (ngModelChange)="onChange()">
ngModelChange is not working in this senario.

You can try to use the (change) instead of (ngModelChange).
Here is some explanation to help you understand this.

Use input like this:
(input)="handle($event)"
And Handle event in your typescript accordingly.

FormControl to the rescue!!
FormControls and Reactive forms are great and it will save your day! :)
Mark ReactiveFormsModule in your app.module, import FormControl to your component aaand... For demo I used a simple timeout to change the value to trigger the valueChanges:
myControl = new FormControl('')
constructor() { }
ngOnInit() {
setTimeout(() => {
this.myControl.setValue('something');
}, 2000);
this.myControl.valueChanges.subscribe((data) => {
console.log('changed!')
});
}
And template:
<input type="text" readonly [formControl]="myControl">
StackBlitz
P.S if this is input is part of a template driven form, this wouldn't work, since ngModel and formControl shouldn't be used together. So you would be notified of that. So in that case I suggest you go reactive way ;)

How do I set 'selective-input' to a form field in Angular?

I have a form input field in angular that is to be filled with a number.
How can I set it up in a way that when you try to add any other character that is not a number, nothing happens. How can my form work as if only integer keys on the keyboard are working? For example if my form has 100 and I try to input a character like the plus sign nothing happens?
here is the code for my form.

If you want your input to be only number you can specify that with type property, for example:
<input type="number" />
and it will accept only integers.

You can also subscribe to the keydown event for that input:
// in your template
<input (keydown)='onKeyDown($event)' ...>
// in your component
onKeyDown(event: KeyboardEvent) {
if (!event.key.match(/[0-9]{1}|Delete|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace/)) {
event.preventDefault();
}
}
Note that you will have to allow for the navigation keys and delete keys, etc as well.

Angular: Call markAsDirty() in Custom Input Component from NgForm

I implemented a custom component which is a wrapper for an input with NgModel. I connected them with a ControlValueAccessor. It works well, I can easily access values from my parent component.
But if I try to call markAsDirty() the touched flag is only changing on my component, it has no effect to my input inside the component. I will give you an example:
// Parent Component
onSubmit(form: NgForm) {
this.form.controls.registerEmail.markAsDirty();
}
// Thats how the component looks like in my form:
<form #form="ngForm" (ngSubmit)="onSubmit(form)" [ngClass]="{'has-error': !form.valid}">
<form-text label="E-Mail" name="registerEmail" email required placeholder="" [(ngModel)]="eMail"></form-text>
</form>
// Result
<form-text label="E-Mail" name="registerEmail" class="ng-untouched ng-invalid ng-dirty">
<label for="form-text-2">E-Mail</label>
<input class="input-control invalid ng-untouched ng-pristine ng-invalid" type="text" id="form-text-2">
</form-text>
As you can see the form-text has the "ng-dirty" class, the input inside remains pristine.
To implement my custom component I used one the many instructions you find on the web. Here is the one I used: angular2 custom form control with validation json input
I want to mark every input field as dirty when the submit button is pressed. Because my validation shows up, when you blur the input.
I figured out that there is the problem my component inherits from ControlValueAccessor. The only connection between my component and my NgForm is over its NgModel. The NgForm can use my component as FormControl because it has its own NgModel. Over events it's possible to pass values in two directions. But it's not possible with methods like markAsDirty() or markAsTouched(). Inside the component it's no problem. But my NgForm has no real access to components. Only to NgModel.
Is there any way to implement that? I thought it's not that hard to figure it out, but I am struggling for a long time with that. My only solution for the moment is to iterate over every input with jQuery to fire a focus. There must be a cleaner solution for that.
Thx

You can pass as input in the component which implements ControlValueAccessor the dirty property of the form and then update the state of your inner input using ReactiveFormsModule and FormControl.
The component which holds your form:
<form #myForm="ngForm" (submit)="onSubmit($event)">
<my-input name="my-input" [(ngModel)]="myInput" [formDirty]="myForm.dirty"></my-input>
<button type="submit">Submit</button>
</form>
Then in the component which implements ControlValueAccessor:
ngOnChanges({ formDirty }: SimpleChanges) {
if (formDirty.currentValue) {
this.inputCtrl.markAsDirty();
} else {
this.inputCtrl.markAsPristine();
}
}
Here you can find the relevant snippet.

You need to call onTouched() (this._onTouchedCallback) from inside your component when you want the controls status set to touched. Same for this._onChangeCallback
For example by adding (ngModelChange)="onTouched(value)" to the input tag in my-custom-input
Copied from:
https://github.com/angular/angular/issues/10151

The problem is that there is no easy way to get any notification when dirty state changes. See https://github.com/angular/angular/issues/10887.
Helper directive:
#Directive({
selector: 'my-input'
})
export class MagickDirective implements DoCheck {
constructor(private control:NgModel){
}
ngDoCheck(): void {
//you can do whatever you want
if(this.control.dirty) {
(this.control.valueAccessor as MyInputComponent).setDirty(true);
}
}
}

Angular 2 ngModel inside a function

I'm trying to pass a ngModel to a function and get the change,
I don't know the way to use.
this is what I got now:
<ion-input text-right
formControlName="monday"
type="number" pattern="[0-9]*"
placeholder="00.00"
[(ngModel)]="monday"
(keypress)="onChange(monday)">
</ion-input>
<ion-input text-right
formControlName="tuesday"
type="number" pattern="[0-9]*"
placeholder="00.00"
[(ngModel)]="tueasday"
(keypress)="onChange(tuesday)">
</ion-input>
.... and so on...
Then in my page.ts I got
monday: string = '';
tuesday: string = '';
etc...
onChange(input: string){
//I want the input to correspond to my ngModel so it gets updated
input = this.clientAction.transformInput(input);
}
I don't want to do:
this.monday = this.clientAction.transformInput(input);
Because as you may think I got all the day of the week so I don't want to have a function for every day like:
onChangeMonday(){};
onChangeTuesday(){};
I need something dynamic.
How can I resolve this issue?
Thanks in advance
[SOLUTION] #AJT_82
instead of using my ngModel and trying to update it, the solution was to access the controls from the form.
in your page.html
<ion-input text-right
formControlName="monday"
type="number" pattern="[0-9]*"
placeholder="00.00"
[(ngModel)]="monday"
(keypress)="onChange(monday, 'monday')">
</ion-input>
then in your page.ts
onChange(input: string, day: string){
this.rateForm.controls[day].setValue(this.clientAction.transformInput(input));
}
works like a charm now !!
Thanks #AJT_82

Since you have a form, I would suggest that you skip the ngModels altogether and make use of the form you have. Still a bit unsure about what this.clientAction.transformInput(input) is supposed to do, transform the values somehow, as you explained. You should be able to incorporate this, perhaps when you submit the form? Anyway, as said, you have your form values safely stored in the object created by the form, which would for you look something like this:
{
"monday":null,
"tuesday":null,
"wednesday":null,
// ... and so on
}
When you type in your fields you can capture every keypress with valueChanges, where you can access the complete form:
this.myForm.valueChanges.subscribe(res => {
console.log("all form values: ", res) // here is an object with all your form values
})
When you need, you can also access each form control by, here accessing monday:
console.log(this.myForm.controls['monday'].value)
So this get's rid of the hassle to use ngModel for each form value.
So these are a couple of ways you can intercept the values and then "transform" them at some point, when you want/need to. Probably best place to do so, is when submitting form, loop the values and transform them. And this is totally dynamic, as you wished for, and do not need 7 functions to transform each form control! ;)
Hope this helps you, and here's a plunker (check the console as well).
Plunker

When you are using ngModel why do you want to pass the same in to function
<ion-input text-right
formControlName="monday"
type="number" pattern="[0-9]*"
placeholder="00.00"
[(ngModel)]="monday"
(keypress)="onChange()">
</ion-input>
and handle using the ngModel itself as
onChange(){
input = this.clientAction.transformInput(this.monday);
}
Update 1:
I got your are looking transform the textbox value as the user types it.
Check Custom Directive