CODEWITHSUNDEEP
javascripthtmlcssangularbootstrap-4
MadMax
MadMax

Reputation: 306

attaching two input placeholder in one placeholder

Currently i am working in a navigation project and I get two inputs from the user as longitude and latitude. The inputs should be given one after other. What i want is to make this two input as one separated by comma so that if i enter like 41.23, 34.32 , it goes to location of longitude of 41.23 and latitude of 34.32.

My code at the moment is :

<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="Enlem(Y)" name="lat" id="lat" #lat="ngModel" ngModel required>
              <mat-error *ngIf="lat.touched && lat.invalid">
                <div *ngIf="lat.errors.required">Bu alanı boş geçemezsiniz.</div>
              </mat-error>
            </mat-form-field>
          </td>
          <td>
            <mat-form-field>
              <input matInput placeholder="Boylem(X)" name="lon" id="lon" #lon="ngModel" ngModel                         required>
              <mat-error *ngIf="lon.touched && lon.invalid">
                <div *ngIf="lon.errors.required">Bu alanı boş geçemezsiniz.</div>
              </mat-error>
            </mat-form-field>
          </td>
        </tr>
      </table>
      <button [disabled]="!f.valid" class="btn btn-outline-primary">Git</button>
    </form>
  </div>

Upvotes: 0

Views: 346

Answers (2)

MadMax
MadMax

Reputation: 306

Thanks Eliseo, the following code get the job done.

export class LocationComponent {

  lat;
  lon;

  constructor() {
  }

  go(form) {
    form.lat=this.lat;
    form.lon=this.lon
    this.mapService.esri.go(form.lon, form.lat);
    this.dialogRef.close();
  }
  changeLatLon(value:any){
    let latlog=value.split(',');
    this.lat=latlog[0];
    this.lon=latlog.length>1?latlog[1]:0; //if latlon haven't a ",",
                                          //   latlong.length=1 
  }
}

Upvotes: 0

Eliseo
Eliseo

Reputation: 57939

just in (change) make a split

<input #latlon (change)=changeLatLon(latlon.value)>

changeLatLon(value:any)
{
    let latlog=value.split(',');
    this.lat=latlon[0];
    this.lon=latlon.length>1?latlog[1]:0; //if latlon haven't a ",",
                                          //   latlong.length=1
}

Upvotes: 1

Related Questions