Guide to Angular 6 Reactive Forms: Automatically filling one text field when another input is selected

Question

Guide to Angular 6 Reactive Forms: Automatically filling one text field when another input is selected

I'm currently learning Angular 6 and exploring reactive forms. I want to set up a feature where selecting an option in one field will automatically populate another field.

The objective is to have the coefficient input update based on the number selected from the dropdown menu. For instance, choosing '1' should set the coefficient to ".15". Similarly, selecting '2' should correspond to ".175", and '3' to ".2".

What would be the most effective approach to implement this functionality? Thank you for your assistance!

Below is my form setup:

<form name="form" class="form-horizontal" (ngSubmit)="createForm.form.valid && createNewMonitoringPoint()" #createForm="ngForm" novalidate>

 <select class="col-md-12 form-control" [(ngModel)]="newmp.number"
    [ngClass]="{ 'is-invalid': createForm.submitted && newmp.number.invalid }" 
    required name="number">

    <option value="" disabled selected>Choose...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>

 </select>

 <p>Pipe Roughness Coefficient (n) </p>
 <input type="coefficient" id="coefficient" 
    #coeffcient="ngModel" name="coefficient" [(ngModel)]="newmp.coefficient" 
    class="form-control" placeholder="e.g. .016" />

 <button type="submit" value="Create">Create</button>

</form>

angular typescript

Answer 1

Answer №1

Utilize a template form instead of a reactive form. Insert the (change) method within the select form like so:

<select (change)="selected()">...</select>

Here is the logic:

selected() {
  if (this.newmp.number === 1) {
    this.newmp.coefficient = .15;
  } else if (this.newmp.number === 2) {
    this.newmp.coefficient = .175;
  } else if (this.newmp.number === 3) {
    this.newmp.coefficient = .2;
  }
}

Explanation: The implementation involves using two-way data binding with inputs through [(ngModel)]. Any changes in the model will update the input value and vice versa. When there is a change in the select element, the change() event is triggered which then calls the method select() or any desired name. No need to pass values explicitly as

this.newmp.number</code contains the updated value. As you perform your logic and assign the value to your input via <code>this.newmp.coefficient

, the updated value automatically reflects in the HTML template due to two-way data binding.

Answer 2

Utilize a template form instead of a reactive form. Insert the (change) method within the select form like so:

<select (change)="selected()">...</select>

Here is the logic:

selected() {
  if (this.newmp.number === 1) {
    this.newmp.coefficient = .15;
  } else if (this.newmp.number === 2) {
    this.newmp.coefficient = .175;
  } else if (this.newmp.number === 3) {
    this.newmp.coefficient = .2;
  }
}

Explanation: The implementation involves using two-way data binding with inputs through [(ngModel)]. Any changes in the model will update the input value and vice versa. When there is a change in the select element, the change() event is triggered which then calls the method select() or any desired name. No need to pass values explicitly as

this.newmp.number</code contains the updated value. As you perform your logic and assign the value to your input via <code>this.newmp.coefficient

, the updated value automatically reflects in the HTML template due to two-way data binding.

Guide to Angular 6 Reactive Forms: Automatically filling one text field when another input is selected

Answer №1

Similar questions

In Javascript, determine the root cause of a boolean expression failing by logging the culprit

How can I enable autofocus on a matInput element when clicking in Angular 6?

Encountering issues with Angular component test cases: receiving a Type Error stating it cannot read the property "contractno" as it is undefined

Create a separate variable for every component within a custom module in Angular 4

"Despite modifying the ID in the response data of Angular MongoDB, the request data ID remains unchanged

You are able to set up the booking.com form once but cannot do so again using the ngOnInit method

[Vue warning]: The property "text" was accessed during rendering, however it is not defined on the current instance using Pug

Issue Establishing Connection Between Skill and Virtual Assistant Via Botskills Connect

Exploring the depths of complex objects with the inclusion of optional parameters

Tips for integrating Typescript Definition files with Visual Studio 2017

Implement a personalized Laravel Dusk selector with the attribute data-dusk

Troubleshooting: Issues when using jQuery metisMenu in conjunction with *ngIf

Struggling with defining content and background scripts while using AngularJS2 CLI to build a Chrome extension

What is the best way to set up initial state in react-native-day-picker?

Best Method for Confirming Deletion in Data Table with Shadow and UI

Angular4 interceptor modifying the response

Can parameters with identical union types in a function signature be streamlined to contain only the exact same subtypes using generic types?

Iterate through elements in Angular using *ngFor with a TrackBy function across two levels of nested

What could be causing the observable collection to display the correct number of objects, yet have them all appear empty?

Is it possible to import the identical file twice consecutively using html and typescript?