Search code examples
javascriptangulartypescriptcurrencyconverters

angular how input and select value return result without submit


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>

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


Solution

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

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