Question

Angular FormControl有一个valueChanges Observable，表示：

每次控件的值在UI中或以编程方式更改时，都会发出一个事件。

有没有办法将FormControl设置为忽略程序化值更改？（基本上相当于.NET中的OneWayToSource绑定）

具体来说，我面临的问题是我的valueChanges订阅，我正在更新一堆绑定到一堆其他控件的值，然后导致valueChanges触发所有它们也是有问题的，因为它们在valueChanges处理程序中执行的操作与用户实际触及的控件冲突。

Answer 1

您可以通过将选项setValue传递给setValue(value: any, options: { onlySelf?: boolean; emitEvent?: boolean; emitModelToViewChange?: boolean; emitViewToModelChange?: boolean; } = {}): void来跳过发出valueChange事件。

SELECT * FROM mytable WHERE myfunction(description) < 500 AND column2 < 1000
                           [-----------------------------]   [--------------]
                               high-CPU cost condition         easy-to-test 
                              requiring 100 µs per test         condition

另外，您可能需要查看其他选项。

如果onlySelf为true，则此更改将仅影响此FormControl的验证，而不影响其父组件。默认为false。

如果emitEvent为true，则此更改将导致FormControl上的valueChanges事件被发出。默认为true（因为它落到updateValueAndValidity）。

如果emitModelToViewChange为true，则将通过onChange事件通知视图有关新值的信息。如果未指定emitModelToViewChange，则这是默认行为。

如果emitViewToModelChange为true，则将触发ngModelChange事件以更新模型。如果未指定emitViewToModelChange，则这是默认行为。

Docs

Answer 2

反应式表单组具有yourFormName.pristine属性

您可以使用！yourFormName.pristine仅检测UI更改

 * A control is `pristine` if the user has not yet changed
 * the value in the UI.
 *
 * @returns True if the user has not yet changed the value in the UI; compare `dirty`.
 * Programmatic changes to a control's value do not mark it dirty.
 */
readonly pristine: boolean;

Answer 3

您可以传递"msg": "The conditional check 'variable.value != null' failed. The error was: error while evaluating conditional (variable.value != null): 'null' is undefined\n\nThe error appears to be in '/tmp/awx_495499_tuyjhnpl/project/tasks/unset-environment-variables.yml': line 14, column 3, but may\nbe elsewhere in the file depending on the exact syntax problem.\n\nThe offending line appears to be:\n\n\n- name: Fail setup if variable wasn't correctly unset\n ^ here\n", "_ansible_no_log": false作为以下反应式方法的选项，以防止它们触发valueChanges事件

{ emitEvent: false }

this.form.patchValue(value, { emitEvent: false })

this.form.setValue(value, { emitEvent: false })

this.form.controls.email.updateValueAndValidity({ emitEvent: false })

是，禁用会触发valueChanges事件

PS：this.form.disable({ emitEvent: false })上方是反应形式

阅读这篇出色的文章，它将回答您所有的问题，甚至可以对反应式提供一些深刻的见解：

https://netbasal.com/angular-reactive-forms-tips-and-tricks-bb0c85400b58

Answer 4

我可以通过将此侦听器放在html文件上来做到这一点：

<ss-multiselect-dropdown ... (ngModelChange)="functionToTrigger($event)"></ss-multiselect-dropdown>

在.ts文件上：

functionToTrigger($event) {
    if (event === undefined) {
        // Put here are the instructions for UI changes
    } else {
        // Put here are the instructions for programmatic changes
}

我真的不知道为什么会这样。我通过反复试验得出了这个解决方案。

Angular Reactive Forms valueChanges - 仅更改UI

4 个答案: