如何在 Angular 输入框中限制输入并保持模型正确？

Question

我很难实现与 AngularJS 中的解析器和格式化程序等效的功能。我的用例不直接是 parser/formatter，但这是我想要完成的。

我有一个键的动态列表。对于这些键中的每一个，用户可以输入一个 0-100 的值。如果用户输入（键盘或粘贴）任何字符，它们将被删除。如果用户输入任何大于 100 的数字，则上限为 100。

为此，我创建了一个指令来过滤掉我需要的东西。该指令在 input 元素上正常工作，但底层 form 没有获得正确的值，如下所示。

无论如何，表格似乎是我最后输入的内容。

如何防止更新无效值的模型？

我为此创建了一个 StackBlitz。代码的要点是：

app.component.html

<form #form="ngForm">
  <div *ngFor="let key of list">
  <input name="{{key}}" ngModel appFilter >
  </div>
</form>

<pre>
form:
{{ form.value | json }}
</pre>

app.component.ts

export class AppComponent  {
  readonly list = ['foo', 'bar'];
}

filter.directive.ts

@Directive({
    selector: 'input[appFilter]',
})
export class FilterDirective {
    // TODO: remove directive?
    @Output()
    ngModelChange: EventEmitter<any> = new EventEmitter();

    value: string;

    @HostListener('input', ['$event'])
    onInputChange($event: TextInput) {
        const filtered = $event.target.value.replace(/[^0-9]/gi, '');
        if (filtered.match(/^[0-9]/)) {
            // starts with a number, must be a number
            const number = +filtered.replace(/\*/gi, '');
            $event.target.value = `${Math.min(100, number)}`;
        } else {
            // it must be empty string
            $event.target.value = '';
        }
        this.ngModelChange.emit($event.target.value);
    }
    constructor() {}
}

interface TextInput {
    target: {
        value: string;
    };
}

Answer 1

通过使用 $event.target.value，您可以调整 input 的值，但不会调整基础 Angular NgControl 的值。幸运的是，只要具有 appFilter 属性的 input 也具有关联的 ngModel、formControl 或 formControlName 属性，就可以将 NgControl 注入到您的指令中.

将 NgControl 注入您的 FilterDirective 并使用它来设置值：

import { NgControl } from '@angular/forms';

constructor(private ngControl: NgControl) { }

@HostListener('input', ['$event'])
onInputChange($event: TextInput) {
    const filtered = $event.target.value.replace(/[^0-9]/gi, '');
    if (filtered.match(/^[0-9]/)) {
        // starts with a number, must be a number
        const number = +filtered.replace(/\*/gi, '');
        this.ngControl.control.setValue(`${Math.min(100, number)}`);
    } else {
        // it must be empty string
        this.ngControl.control.setValue('');
    }
}

您是否应该预料到 FilterDirective 在没有 ngModel、formControl 或 formControlName 属性的情况下使用？然后使注入的 NgControl @Optional().

如何在 Angular 输入框中限制输入并保持模型正确？

How do I restrict input in an Angular input box and keep the model correct?

angular

angular-forms