NgForm的valueChanges可观察属性来对表单控件值的变化做出反应。这个类似乎定义了valueChanges可观察对象，而touched属性则被定义为布尔类型。
是否有一种方法可以对“控件触摸”事件做出反应？FormControl类，并添加markAsTouched方法，该方法将调用本地方法并附加你的副作用。import { Injectable } from '@angular/core';
import { FormControl, AsyncValidatorFn, ValidatorFn } from '@angular/forms';
import { Subscription, Subject, Observable } from 'rxjs';
export class ExtendedFormControl extends FormControl {
statusChanges$: Subscription;
touchedChanges: Subject<boolean> = new Subject<boolean>();
constructor(
formState: Object,
validator: ValidatorFn | ValidatorFn[] = null,
asyncValidator: AsyncValidatorFn | AsyncValidatorFn[] = null
) {
super(formState, validator, asyncValidator);
this.statusChanges$ = Observable.merge(
this.valueChanges,
this.touchedChanges.distinctUntilChanged()
).subscribe(() => {
console.log('new value or field was touched');
});
}
markAsTouched({ onlySelf }: { onlySelf?: boolean } = {}): void {
super.markAsTouched({ onlySelf });
this.touchedChanges.next(true);
}
}
ng2没有提供直接响应触摸事件的方法。它使用 (input) 事件触发 valueChanges 事件，使用 (blur) 事件设置 AbstractControl 的 touched/untouched 属性。
因此，您需要在模板中手动订阅所需的事件，并在组件类中处理它。
我曾经遇到过相同的问题 - 我编写了这个帮助方法来提取一个可观察对象，您可以订阅它以便在表单被触摸状态更改时得到通知：
// Helper types
/**
* Extract arguments of function
*/
export type ArgumentsType<F> = F extends (...args: infer A) => any ? A : never;
/**
* Creates an object like O. Optionally provide minimum set of properties P which the objects must share to conform
*/
type ObjectLike<O extends object, P extends keyof O = keyof O> = Pick<O, P>;
/**
* Extract a touched changed observable from an abstract control
* @param control AbstractControl like object with markAsTouched method
*/
export const extractTouchedChanges = (control: ObjectLike<AbstractControl, 'markAsTouched' | 'markAsUntouched'>): Observable<boolean> => {
const prevMarkAsTouched = control.markAsTouched.bind(control);
const prevMarkAsUntouched = control.markAsUntouched.bind(control);
const touchedChanges$ = new Subject<boolean>();
function nextMarkAsTouched(...args: ArgumentsType<AbstractControl['markAsTouched']>) {
prevMarkAsTouched(...args);
touchedChanges$.next(true);
}
function nextMarkAsUntouched(...args: ArgumentsType<AbstractControl['markAsUntouched']>) {
prevMarkAsUntouched(...args);
touchedChanges$.next(false);
}
control.markAsTouched = nextMarkAsTouched;
control.markAsUntouched = nextMarkAsUntouched;
return touchedChanges$;
}
// Usage (in component file)
...
this.touchedChanged$ = extractTouchedChanges(this.form);
...
我接下来会使用 merge(this.touchedChanged$, this.form.valueChanges)，以获取一个observable对象，该对象包含了所有用于更新验证所需的更改。
*编辑 - 在@marked-down的建议下，我已将对先前函数的调用移到发出新值之前，以防您在收到值后直接查询并最终失去同步
markAsTouched/markAsUntouched 函数中发出值的主题的顺序，因为如果你正在监听 touchChanged$ 事件并决定查询 control.touched，你可能会陷入一个状态，其中发射的值是 true 而 control.touched 属性仍然是 false。这可以通过在调用现有的 markAs(Un)touched 函数后再发射来避免。 - marked-downthis.control['_markAsTouched'] = this.control.markAsTouched;
this.control.markAsTouched = () => {
this.control['_markAsTouched']();
// your event handler
}
FormControl的默认markAsTouched方法。_markAsTouched属性来存储默认的markAsTouched函数。然后，我们更新markAsTouched函数来执行其默认行为，然后执行我们需要的任何自定义操作。聪明。为了完整起见，我希望我们在ngOnDestroy中恢复更改，使用this.control.markAsTouched = this.control.['_markAsTouched'];。 - undefined如果你的问题和我的一样，我正在尝试在一个组件中标记一个字段为已触摸，然后在另一个组件中做出响应。我可以访问该字段的AbstractControl。我解决这个问题的方法是：
field.markAsTouched();
(field.valueChanges as EventEmitter<any>).emit(field.value);
然后我只需在另一个组件中订阅valueChanges。值得注意的是：field.valueChanges被导出为Observable，但在运行时它是一个EventEmitter，这使得解决方案不够完美。显然，这种方法的另一个限制就是你订阅了比仅触摸状态更多的内容。
/**
* Allows to listen the touched state change.
* The util is needed until Angular allows to listen for such events.
* Https://github.com/angular/angular/issues/10887.
* @param control Control to listen for.
*/
export function listenControlTouched(
control: AbstractControl,
): Observable<boolean> {
return new Observable<boolean>(observer => {
const originalMarkAsTouched = control.markAsTouched;
const originalReset = control.reset;
control.reset = (...args) => {
observer.next(false);
originalReset.call(control, ...args);
};
control.markAsTouched = (...args) => {
observer.next(true);
originalMarkAsTouched.call(control, ...args);
};
observer.next(control.touched);
return () => {
control.markAsTouched = originalMarkAsTouched;
control.reset = originalReset;
};
});
}
由@ʞᴉɯ发布的扩展解决方案
const form = new FormControl('');
(form as any)._markAsTouched = form.markAsTouched;
(form as any).touchedChanges = new Subject();
form.markAsTouched = opts => {
(form as any)._markAsTouched(opts);
(form as any).touchedChanges.next('touched');
};
...
(form as any).touchedChanges.asObservable().subscribe(() => {
// execute something when form was marked as touched
});