angular how input and select value return result without submit i have currency converter form latest api

<form [formGroup]="newForm" (ngSubmit)="convert()">
        <div>

            <h1>
                Currency
            </h1>
            <div>

                <input type="number" formControlName="amount1">

                <select id="from" formControlName="from">
         <option value="" disabled>Choose currency</option>
        <option value="{{ m.code }}" *ngFor="let m of rates" >{{m.code}}</option>
    </select>
            </div>
            <div>

                <input type="number" [value]="name">

                <select id="to" formControlName="to">
         <option value="" disabled>Choose currency</option>
        <option value="{{ m.code }}" *ngFor="let m of rates" >{{m.code}}</option>
    </select>
            </div>
            <button type="submit" [disabled]="!newForm.valid"> Convert </button>
        </div>
    </form>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

For example, to convert from dollar to euro, enter a number in "amount1" and return it to <input type="number" [value]="name">. How do this without submit button and automatically returns the result and if I change the number it automatically changes

CodePudding user response：

You can detect form values changes by subscribing to valueChanges property in ngOnInit method.

 this.newForm.get('amount1').valueChanges.subscribe((val) => {
  this.name = val;
});

CodePudding user response：

you can use (input) evt. i hope it work for you.

like below way

<input type="number" [value]="name" (input)= "getNum($event.target.value)">

ts

getNum(val){
    console.log(val)
}