时间戳

首页 > 解决方案 > Angular JS-一字段接受两种不同类型的数据（坐标字符串或地址字符串）

angular - Angular JS-一字段接受两种不同类型的数据（坐标字符串或地址字符串）

问题描述

对于 Angular 来说是全新的，并且刚刚开始充实一个输入框，该输入框根据图标的点击接受坐标或用户地址作为字符串。.ts 文件中的 getRequest() 方法需要确定用户输入的字符串类型 - 以便正确验证和设置 API 请求。我正在尝试通过单击图标添加动态 [ngClass]，但无法真正从 .ts 文件中获取类名。如何访问元素的动态类名？我希望如果我可以检查输入元素设置的类，我会知道期望什么数据。还是我应该以不同的方式解决这个问题？谢谢。

HTML

 <div class="locationOptions home" 
   (click)="showHomeCoords=!showHomeCoords; 
            homeAddressFromField.value=null;">

    <i #homeIcon class="material-icons" *ngIf="!showHomeCoords">home</i>
    <i #homeCrosshairIcon class="material-icons" *ngIf="showHomeCoords">my_location</i>
</div>

  <mat-form-field formGroup='homeForm' name="myHome" class="half-width" appearance="outline" flex>

    <mat-label>Home Address</mat-label>
      <input type="text"
             formControlName="homeInput"
             [ngClass]="showHomeCoords ? 'coords' : 'address'"
             matInput placeholder={{changeHomePlaceHolder()}} 
             #homeAddressFromField 
              required>
    </mat-form-field>

.TS

@ViewChild('homeAddressFromField') homeAddressFromField : ElementRef; 

 detectCoordinateOrAddress(locationEntered:any){

   let homeField = this.homeAddressFromField.nativeElement;

   let a1: any;

  if(homeField.querySelectorAll('.coords'){

       a1 = this.isThisInputCoordinateGood(locationEntered)

  }else{

       a1 = parseAddress.parseLocation(locationEntered)

  }

  return a1;

 };


getRequest(home:any){

  let h = this.detectCoordinateOrAddress(home);

  this.setRequest(h);

  this.returnInfo(this.request);

}

标签： angularvalidationinput

解决方案

好的，我的建议在您的输入字段中，使用这样的变量

      <input type="text"
         formControlName="homeInput"
         [ngClass]="homeCoordinates"
         matInput placeholder={{changeHomePlaceHolder()}} 
         #homeAddressFromField 
          required>

并将变量设置为 .ts 函数中的正确类名。

或者，如果您真的想使用您提到的方式，请从 .ts 函数内部将变量 showHomeCoords 设置为 true / false

推荐阅读