输入更改事件不适用于输入 formControl？

Question

<div class="start-time-wrapper">
  <input class="form-control" type="text" placeholder="From"
  [ngxTimepicker]="start" [format]="24"
  formControlName="startTime"
  (change)="startTimeChange($event, i)">

startTimeChange(startTime, i){
  this.orderForm.value.date[i].time.endTime = this.addMinutes(startTime);
  console.log(this.orderForm.value);
}

createItem(): FormGroup {
  return this.formBuilder.group({
    date: [''],
    time: this.formBuilder.group({
      startTime: [''],
      endTime: [''],
    }),
  });
}
addItem(): void {
  this.date = this.orderForm.get('date') as FormArray;
  if (!this.orderForm.value.date[0].date || !this.orderForm.value.date[0].time.startTime || !this.orderForm.value.date[0].time.endTime) {
    this.toastr.error('Please add date & time for continue!');
    this.showError = true;
    return;
  } else {
    this.showError = false;
  }
  this.date.push(this.createItem());
}

您好，我正在使用 angular 框架。所以也许有人经历过这个。？当我们尝试在来自控件的输入上添加更改事件时，更改事件将不起作用或无法触发。也许有人有其他方法可以在 formControl 输入上添加更改事件，请告诉我。提前致谢！！

Answer 1

使用 ReactiveForms 时，您可以直接从控制器中使用 FormControl.valueChanges observable 来响应更改。

参见：https://angular.io/api/forms/AbstractControl#valueChanges

import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  group: FormGroup;
  constructor(private fb: FormBuilder) {
    this.group = fb.group({example: this.fb.control('')});
    this.group.get('example').valueChanges.subscribe(change => {
      /* changes here */
    })
  }
}

FormArray 的扩展示例

堆栈闪电战：https://stackblitz.com/edit/angular-ivy-y9zi7z?file=src/app/app.component.ts

FormArray 的想法与此类似。由于 FormArray 可能会随着时间的推移而增长，因此我们只需要稍微复杂一些来管理我们的订阅。

总结

创建 FormGroup，并将其添加到您的 FormArray
订阅新创建的FormGroup中相关控件上的valueChanges
为订阅清理添加稍微扩展的逻辑。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnDestroy {
  form: FormGroup;
  subscribers: Subscription[];

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      parts: this.fb.array([]),
    });
    this.subscribers = [];
  }
}

我们将有一个名为 parts

的表单数组

Getter

  get partsArray() {
    return (this.form.controls['parts'] as FormArray).controls as FormGroup[];
  }

模板

<div [formGroup]="form">
  <ng-container *ngFor="let grp of partsArray">
    <div class="row" [formGroup]="grp">
      <input type="text" formControlName="start">
      <input type="text" formControlName="end">
    </div>
  </ng-container>
</div>

将项目添加到数组

  addItem() {
    let array = this.form.get('parts') as FormArray;
    array.push(
      this.fb.group({
        start: this.fb.control(''),
        end: this.fb.control(''),
      })
    );
    this.handleChanges(array.controls[array.length - 1]);
  }

变化检测

  handleChanges(control: AbstractControl) {
    this.subscribers.push(
      control.get('end').valueChanges.subscribe((change) => {
        control.get('start').patchValue(change);
      })
    );
  }

对于这个例子，我只是决定在更新“end”时直接将“start”控件的值设置为与“end”控件相同的值。

清理

  ngOnDestroy() {
    this.subscribers.forEach((sub) => {
      if (!sub.closed) sub.unsubscribe();
    });
  }

因为我们每次向表单添加一行时都会创建一个订阅，所以我们可能希望在我们的组件被销毁时关闭所有这些订阅以避免内存泄漏。

输入更改事件不适用于输入 formControl？

Input change event will not work on input formControl?

angular

angular-reactive-forms

FormArray 的扩展示例