输入改变事件将不工作的输入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框架。也许有人经历过。当我们尝试在control的输入上添加更改事件时，更改事件将不起作用或无法触发。也许有人有其他的方式来添加更改事件的formControl输入请让我知道。提前感谢!!

Answer 1

当使用ReactiveForms时，你可以直接从控制器中使用FormControl.valueChanges可观察对象来响应更改。

见: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扩展示例

stackblitz: 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>

Add Item to array

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);
})
);
}

在这个例子中，我决定直接设置"start"的值控件设置为与"end"相同的值。Control每当"end"更新.

清理

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

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