输入不更新

Question

我正在尝试将数据从一页转移到另一页。但是，当我以编程方式更新输入字段时，如果我之后不手动编辑该字段，它将 return 给我一个空字段。我不确定我这样做的方式是否不正确，或者是否有其他方法。

我遇到的另一个问题是，通常需要单击 2 次按钮才能更新输入字段。我认为这是一个问题，需要等待我正在调用的 API(Arcgis) 的响应。但是，我不确定如何解决这个问题

HTML

<form id="container_categorySelect" [formGroup]="details" (ngSubmit)="onSubmit()">
    <img src="Location_Icon.svg" id="locationIcon" (click)="getLocation()">
    <input class="form-control form-control-lg" id="addressSelect" type="text" placeholder="Address" formControlName="location" [(value)]="currentPosition">
    <button mdbBtn type="submit" id="submitBtn" mdbWavesEffect> Locate </button>
</form>

打字稿

  details:FormGroup = new FormGroup({
    category: new FormControl(''),
    location: new FormControl('')
    }
  );
  currentPosition: string;
  curLocation: any;

constructor(private router: Router,
    private addressService:AddressServicesService, 
    ) {}

// Retrieve location based on current location
  getLocation(){
    // Checks if GPS is supported
    if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(response => {

        // Retrieves address based on coordinates
        this.curLocation = this.addressService.retrieveLocation(response);
        this.currentPosition = this.curLocation.address.ShortLabel
      });
    } else {
      alert("Geolocation is not supported by this device")
    }
  }

地址服务服务

  // Retrieve Location Variables
  currentLocation: any;
  reverseGeo: string = "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode?f=pjson&featureTypes=&location=";

  // Retrieves location based on coordinates
  retrieveLocation(position:any){
    this.http.get(this.reverseGeo + position.coords.longitude+"%2C"+position.coords.latitude).subscribe(response =>{
      // Converts response(Object) to type "any"
      this.currentLocation = response;
    });
    return this.currentLocation;
  }

Answer 1

您可以使用 ngOnChanges() 查看输入是否存在。如果所需的 @Input() 尚不存在，您可以使用 *ngIf.

暂停 HTML

Answer 2

问题是您绑定到值属性并且还提供了 formControlName。就像设置 y = x; y = p；并期望 y 为 x，y 为 p。只有其中一个将被应用，而不是您想要在您的应用程序中出现的行为

综上所述，html现在应该是

<form id="container_categorySelect" [formGroup]="details" (ngSubmit)="onSubmit()">
    <img src="Location_Icon.svg" id="locationIcon" (click)="getLocation()">
    <input class="form-control form-control-lg" id="addressSelect" type="text" placeholder="Address" formControlName="location" >
    <button mdbBtn type="submit" id="submitBtn" mdbWavesEffect> Locate </button>
</form>

为了使代码更简单，我会将 FormBuilder class 注入我们的构造函数并使用它来创建表单

  constructor(..., private fb: FormBuilder) {}
  details = this.fb.group({
    category: [],
    location: []
  });

接下来要更新值，您可以简单地使用 FormControl

上的 setValue() 函数

只需将行 this.currentPosition = this.curLocation.address.ShortLabel; 更改为

const currentPosition = this.curLocation.address.ShortLabel;
this.details.get('location').setValue(currentPosition)

您的代码现在应该如下所示

  getLocation() {
    // Checks if GPS is supported
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(response => {
        // Retrieves address based on coordinates
        console.log("getting");
        this.curLocation = this.addressService.retrieveLocation(response);
        const currentPosition = this.curLocation.address.ShortLabel;
        this.details.get('location').setValue(currentPosition)
      });
    } else {
      alert("Geolocation is not supported by this device");
    }
  }

输入不更新

Input not update

javascript

typescript

angular

angular-reactive-forms