我想通过事件发射器为我的 html 输入设置值，并且在提交表单时这些值没有绑定。如何解决问题？

Question

我有一个反应式表单，两个输入字段正在更改事件发射器的值（纬度和经度的值来自事件发射器（子组件））

这是我的 child.component.ts 向父组件发送值的地方 ...

this.lat.emit(this.latitude.toString());
this.lon.emit(this.longitude.toString());

这是我的 parent.component.html ...

 <ngx-map (lon)="getLon($event)" (lat)="getLat($event)" ></ngx-map>

这是我的 parent.component.ts 捕获发射值的地方

  lat;
  lon;

  getLat($event) {
    this.lat = $event;
  }
  getLon($event) {
    this.lon = $event;
  }

这就是我在 parent.component.ts 中设置验证的方式。

form = new FormGroup({
    ///
    latitude: new FormControl('', [
      Validators.nullValidator,
    ]),
    longitude: new FormControl("", [
      Validators.nullValidator,
    ])
    ///

这是我在parent.component.html..

中的表单代码

    <form [formGroup]="form" (ngSubmit)="create()">

            <input
              status="primary"
              placeholder="Longitude"
              formControlName="longitude"
              type="text"
              nbInput
              fullWidth
              [value]="lon"

            />
            <input
              status="'primary'"
              placeholder="Latitude"
              formControlName="latitude"
              type="text"
              nbInput
              fullWidth
              [value]="lat"
            />
     </form>

这是我的 .ts 代码...

create() {
    console.log(this.form.value);
  }

我的做法是将表单输入中的纬度和经度与发出的值绑定，并从 create() 方法打印所有来自字段的值。

我该如何解决这个问题？？

Answer 1

使用反应形式的 patchValue 如下：

getLat($event) {
    this.form.controls['latitude'].patchValue($event);
}
getLon($event) {
    this.form.controls['longitude'].patchValue($event);
}

检查 this link 以了解有关其工作原理的更多详细信息：

我想通过事件发射器为我的 html 输入设置值，并且在提交表单时这些值没有绑定。如何解决问题？

I want set values to my html inputs via event emitter and when submitting the form the values are not binding . How solve the problem?

angular-directive

angular