时间戳

首页 > 解决方案 > 反应形式中的一些文本框没有使用 Angular 6 清除

angular - 反应形式中的一些文本框没有使用 Angular 6 清除

问题描述

我正在使用 Angular 6 和 Reactive Forms 创建一个包含 2 个部分的计划。位置部分有一个起点和终点文本框，行程部分是日程表中的嵌套对象，也有起点和终点文本框。当用户创建计划时，将显示一个弹出窗口以确认计划已创建。他们可以选择单击弹出窗口上的“创建计划”按钮来创建另一个计划。此弹出窗口关闭对话框并创建一个新的计划对象并将该对象分配给 HTML 中的组件计划对象。

问题是位置部分中的起点和终点字段在屏幕上不清晰。但是行程部分的出发地和目的地字段确实清楚。
时间表被定义为位置和行程部分对象：

  <app-location-section [schedule]="schedule"></app-location-section>
  <app-trip-leg-section [schedule]="schedule"></app-trip-leg-section>

这是位置来源html

<mat-form-field appearance="outline" class="w-25 d-block">
        <mat-label id="mat-card__origin-id" class="label">{{
          ORIGIN_LABEL
        }}</mat-label>

      <input
        type="text"
        matInput
        formControlName = 'originControl'
        [matAutocomplete]="autoOrigin"
        id="mat-card__origin-input-id"
      />
      <mat-autocomplete autoActiveFirstOption #autoOrigin="matAutocomplete">
        <mat-option
          *ngFor="let option of originOptions | async"
          [value]="option"
        >
          {{ option }}
        </mat-option>
      </mat-autocomplete>
    
      <mat-error *ngIf="scheduleForm.controls['originControl'].hasError('invalid')" id="mat-error__origin">
        Please select a valid location
    </mat-error>
    </mat-form-field>

这是来源的打字稿代码。它有 getter 和 setter

get originId(): string {
    return this.schedule.originId;

  }

  set originId(value: string) {
    this._originId = value;
    this.schedule.originId = value;
    this.updateScheduleObject();
  }

这是trip部分的原始代码：

<mat-form-field appearance="outline"class="w-25 d-block">
      <mat-label class="trip-origin-label">{{ ORIGIN_LABEL }}</mat-label>

      <input
          type="text"
          matInput
          formControlName = 'triplegOriginControl'
          [matAutocomplete]="autoTripLegOrigin"
          class = 'trip-origin-input'
      />

      <mat-autocomplete #autoTripLegOrigin="matAutocomplete">
        <mat-option
          *ngFor="let option of triplegOriginOptions | async"
          [value]="option"
        >
          {{ option }}
        </mat-option>
      </mat-autocomplete>
      <mat-error *ngIf="triplegForm.controls['triplegOriginControl'].hasError('invalid')">
        Please select a valid location
    </mat-error>
    </mat-form-field>

这是仅在初始化时使用的打字稿代码：

ngOnInit():void {
  this.triplegForm = new FormGroup({
    "triplegOriginControl": new FormControl(null, [ValidateLocation(this.locationArray)]),
    "triplegDestinationControl": new FormControl(null, [ValidateLocation(this.locationArray)])
  });

  this.triplegForm.get('triplegOriginControl').valueChanges.subscribe(
    (value) => this.leg.originId = value
  );

  this.triplegForm.get('triplegDestinationControl').valueChanges.subscribe(
    (value) => this.leg.destinationId = value
  );

  this.triplegOriginOptions= this.triplegForm.get('triplegOriginControl').valueChanges.pipe(
  startWith(""),
  map((value) => this._filter(value)));

  this.triplegDestinationOptions= this.triplegForm.get('triplegDestinationControl').valueChanges.pipe(
  startWith(""),
  map((value) => this._filter(value)));

   this.fetchData();
  }

这是确认对话框关闭时的代码，创建了新的计划

openDialog(response: ScheduleDTO): void {
    let dialog = this.dialog.open(ScheduleCreationConfirmationDialogComponent, {
      width: '60%',
      height: '80%',
      data: response,
      disableClose: true
    });

    dialog.afterClosed().subscribe( () => {
      let sampleSchedule = new Schedule();
      sampleSchedule.tripLegs = [new TripLeg()]; 
      this.schedule = sampleSchedule;
    });

显示确认对话框并单击创建计划后，我在位置部分的“值”字段上放置了一个手表，它被列为“未定义”，但文本框中有一个值。当我开始在文本框字段中输入数据时，该值被设置为文本框字段中的值。html 中的哪个字段仍然具有旧值，但行程部分已被清除？

标签： angularangular-reactive-forms

解决方案

您提供给子组件的输入是引用绑定的。因此，根据我的建议，您应该在子组件中使用 getter 和 setter 访问 schedule 对象。

所以在 location 组件中，即带有选择器的组件您只需添加以下代码来处理输入变量。

用以下几行替换您输入的代码行：

private _schedule: any;
  @Input()
  public get schedule(): any {
    return this._schedule;
  }
  public set schedule(value:any) {
    this._schedule= value;
  }

推荐阅读