displaying a pair of inputs next to each other

Is it possible to display two input fields side by side? I am using Angular's matInput forms, but struggling to position the second input next to the first.

What I would like to achieve is to have "input1 , input2" on the same line. Here is my code:

<div *ngIf="data.mod=='goLocation'" class="panel-body">
  <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
    <table>
      <tr>
        <td>
          <mat-form-field>
            <input matInput placeholder="Longitude(X)" name="lon" id="lon" #lon="ngModel" ngModel required>
            <mat-error *ngIf="lon.touched && lon.invalid">
              <div *ngIf="lon.errors.required">Please fill out this field.</div>
            </mat-error>
          </mat-form-field>
        </td>
      
        <td>
          <mat-form-field>
            <input matInput placeholder="Latitude(Y)" name="lat" id="lat" #lat="ngModel" ngModel required>
            <mat-error *ngIf="lat.touched && lat.invalid">
              <div *ngIf="lat.errors.required">Please fill out this field.</div>
            </mat-error>
          </mat-form-field>
        </td>
        
      </tr>
    </table>
    <button [disabled]="!f.valid" class="btn btn-outline-primary">Go</button>
  </form>
</div>

javascriptcsshtmlangular

Answer №1

Your table arrangement could be improved by placing both columns in the same row rather than separate rows. Consider restructuring it like so:

<table>
 <tr>
  <td>1st column</td>
  <td>2nd column</td>
 </tr>
</table>

By implementing this change, the 1st and 2nd columns will appear inline with each other.

Answer №2

Give this a try.

<div *ngIf="data.mod=='goLocation'" class="panel-body">
        <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
            <table>
                <tr>
                    <td>
                        <mat-form-field>
                            <input matInput placeholder="Longitude(X)" name="lon" id="lon"
                                   #lon="ngModel" ngModel required>
                            <mat-error *ngIf="lon.touched && lon.invalid">
                                <div *ngIf="lon.errors.required">Please fill in this field.</div>
                            </mat-error>
                        </mat-form-field>
                    </td>
                     <td>
                        <mat-form-field>
                            <input matInput placeholder="Latitude(Y)" name="lat" id="lat"
                                   #lat="ngModel" ngModel required>
                            <mat-error *ngIf="lat.touched && lat.invalid">
                                <div *ngIf="lat.errors.required">Please fill in this field.</div>
                            </mat-error>
                        </mat-form-field>
                    </td>
                </tr>

            </table>
            <button [disabled]="!f.valid" class="btn btn-outline-primary">Go</button>
        </form>
    </div>

Answer №3

 <div *ngIf="data.mod=='goLocation'" class="panel-body">
            <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
                <table>
                    <tr>
                        <td>
                            <mat-form-field>
                                <input matInput placeholder="Longitude(X)" name="lon" id="lon"
                                       #lon="ngModel" ngModel required>
                                <mat-error *ngIf="lon.touched && lon.invalid">
                                    <div *ngIf="lon.errors.required">This field cannot be empty.</div>
                                </mat-error>
                            </mat-form-field>
                        </td>
                        <td>
                            <mat-form-field>
                                <input matInput placeholder="Latitude(Y)" 
                                       name="lat" id="lat"
                                       #lat="ngModel" ngModel required>
                                <mat-error *ngIf="lat.touched && 
    lat.invalid">
                                    <div *ngIf="lat.errors.required">This 
    field cannot be empty.</div>
                                </mat-error>
                            </mat-form-field>
                        </td>
                    </tr>
                    <tr>
                        
                    </tr>
                </table>
                <button [disabled]="!f.valid" class="btn btn-outline-
    primary">Go</button>
            </form>
        </div>

Answer №4

It is recommended to enclose both the button's td within a single tr.

Code Snippet

<div *ngIf="data.mod=='goLocation'" class="panel-body">
  <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
    <table>
      <tr>
        <td>
          <mat-form-field>
            <input matInput placeholder="Longitude(X)" name="lon" id="lon" #lon="ngModel" ngModel required>
            <mat-error *ngIf="lon.touched && lon.invalid">
              <div *ngIf="lon.errors.required">You cannot leave this field empty.</div>
            </mat-error>
          </mat-form-field>
        </td>
        <td>
          <mat-form-field>
            <input matInput placeholder="Latitude(Y)" name="lat" id="lat" #lat="ngModel" ngModel required>
            <mat-error *ngIf="lat.touched && lat.invalid">
              <div *ngIf="lat.errors.required">You cannot leave this field empty.</div>
            </mat-error>
          </mat-form-field>
        </td>
      </tr>
    </table>
    <button [disabled]="!f.valid" class="btn btn-outline-primary">Go</button>
  </form>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on appending a parameter to an image URL using JavaScript

On my website, I am able to insert images with specified width and height using this code: <img src="image.php?w=100&h=100"> I would like the image size to change based on the device screen width. For screens smaller than 600px, I want to displa ...

javascripthtmlimageurl-parameters

Traverse each child element sequentially using setTimeout or a delay function

Looking to dynamically apply a CSS filter to a list of divs with a delay between each iteration. Here are my attempted solutions: $(this).children().each(function() { $(this).delay(5000).css("-webkit-filter", "brightness(2)"); }); And this alternativ ...

javascriptjquery

Tips on how to retrieve an Observable Array instead of a subscription?

Is there a way to modify this forkJoin function so that it returns an observable array instead of a subscription? connect(): Observable<any[]> { this.userId = this.authService.userId; this.habits$ = this.habitService.fetchAllById(this.userId); this.s ...

javascriptarraysangulartypescriptobservable

Obtain the appropriate selection in the dropdown based on the model in Angular

I am working on a dropdown menu that contains numbers ranging from 1 to 10. Below is the HTML code for it: <div class="form-group"> <label>{{l("RoomNumber")}}</label> <p-dropdown [disab ...

javascriptangulartypescript

What is the best way to ensure observables in a template (using async pipe) are fully subscribed to before executing any initialization code?

I am facing an issue with my HTTP service that returns information based on a given item ID. The data is fetched using a Subject, which receives the initial data in the ngOnInit method. To display the returned data in the HTML, I utilize the async pipe. ...

angulartypescriptsubject-observer

"Sending a file (Image) through NextJS API Routes to an external API: A step-by-step guide

I am currently using a combination of NextJS (SSR and SPA for authorized dashboard) with Django Rest FW on the backend. To handle authentication, I employ JWT tokens stored in cookies. As a result, it is necessary to have a middleware at /pages/api/* that ...

javascriptreactjsnext.js

The code is slicing data, but the changes are not reflecting in the user interface

Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...

javascripthtmlreactjsreduxmaterial-ui

Creating elements in Polymer 2.0 is a breeze. Simply use the `createElement` method, then seamlessly import it using `Polymer

While working on a project, I encountered an issue where I was creating and importing an element while setting attributes with data. The code should only execute if the element hasn't been imported or created previously. However, each time I called th ...

javascriptpolymer-2.x

Utilizing Angular's primeng library with CommonJS or AMD dependencies may lead to optimization setbacks

I recently updated my Angular app and started using PrimeNG components. However, after the update to Angular 10, I've been encountering a Warning message: CommonJS or AMD dependencies can cause optimization bailouts. This warning appears for variou ...

angularprimengangular10

Using getJSON to return key/value pair from local host URL in JSFiddle - A step-by-step guide

After following a tutorial on building an API using Python, Flask, SQLite, and SQLAlchemy, I have successfully tested the connection by hitting the localhost address in my browser. Now, I am curious if it is possible to test this connection and see the des ...

javascriptjsonajaxjsfiddle

Retrieve recently appended DOM elements following the invocation of createComponent on a ViewContainerRef

I have a current function in my code that dynamically creates components and then generates a table of contents once the components are added to the DOM. This service retrieves all h3 elements from the DOM to include in the table of contents: generateDy ...

javascriptangulartypescriptdom

Add Content to Textbox by Clicking

In my current setup, I have a variety of buttons that, when clicked, should add the text from the button to a text box. Each time a button is clicked, I want the text to be appended to whatever is already in the input field. Current Approach $('#js- ...

javascriptjqueryjquery-ui

The disappearing act of the Show/Hide Button in Sencha Touch 2.3.1: what's the

I'm running into an issue with my sencha touch app. Here is the container I have defined: { xtype: 'container', text: 'SOMETHING', height: '15%', width: '15%', ...

javascriptextjssencha-touch

Can you suggest a method using Lodash to remove specific rows from an array based on the value of a certain field within the array?

Currently, I am utilizing the following function: remove: function (arr, property, num) { for (var i in arr) { if (arr[i][property] == num) arr.splice(i, 1); } }, Although this functi ...

javascriptlodash

Would it be secure to store the Express Session Secret as plain text while using it with Angular inside a Docker Container?

Upon taking over a new project, I noticed that the front end docker container has been set up in the following manner. Although this may seem like a basic question, I am still getting the hang of working with Angular/Express/Nodejs. FROM node:18.12.1 ...

node.jsangulardockerexpresssession

How can I disable AngularJS code completion/suggestion feature in VS Code?

Currently, I have made the switch from AngularJS to Angular 6. However, despite this change, VS Code continues to offer me AngularJS code suggestions. https://i.stack.imgur.com/XerhF.png The syntax presented in the first suggestion is for AngularJS while ...

angularvisual-studio-code

Guide to swapping images on button click in HTML with dynamically changing image URLs retrieved from the server

I am a beginner in client-side scripting and new to Stack Overflow. I am looking for guidance on how to change an image within a div element upon clicking a button or anchor tag. Here is the code snippet I have written to achieve this: $scope.captchaCha ...

javascriptjqueryhtml

What is the mechanism behind making a Promise appear synchronous when using a Proxy in JavaScript?

const handler: ProxyHandler<any> = { get: (target: Promise<any>, prop: string, receiver: any) => { return target.then((o) => { return o[prop].apply(o); }); }, }; return new Proxy(obj, handler) ...

javascriptnode.jstypescript

What is the best approach for promoting reusability in Angular: creating a new CSS class or a new component?

I have a div with a set of CSS properties that are essential to my application. These properties will be reused across multiple pages and components. <div style="display: flex; flex-direction: column; height: 100%"> //inner html will vary based on c ...

htmlcssangularangular8

Refresh collection of texts

I am attempting to update an item within a subarray of a document. The type of the subarray is an array of strings: Dictionary.findOne({ name: req.query.name }, function(err1, data){ if(err1){ logger.error(err1); res.send({ ...

javascriptnode.jsmongodbmongoose