使用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> 

这是原产地的打字稿代码。它有吸气剂和吸气剂

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

  }

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

这是旅行部分的原始代码：

<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中的哪个字段仍具有旧值，但行程部分已清除？

解决方法

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

因此，在具有选择器 的位置组件中，只需添加以下代码即可处理输入变量。

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

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