Angular react 形式 - 在模糊时验证但在键入时更新模型

Question

我有一个使用 react 形式和输入文本的情况。

我需要:

当用户输入时，根据输入的内容建议一个列表(我使用的是 ngx bootstrap typeahead)；

仅当用户失去输入焦点时才验证输入字段。

为了仅在用户离开输入字段时执行输入验证，我在验证选项中添加了“updateOn: 'blur'”。问题是这不仅会影响执行验证的时间，还会影响模型的更新时间。使用“模糊”，模型仅在用户离开输入文本时更新，因此建议列表无法按用户类型正常工作，因为模型没有更新。

我在 stackblitz 中添加了一个示例.

我想知道是否有一种方法可以只对模糊执行验证，但模型会随着用户键入而更新。

谢谢。

Answer 1

我不知道这样做的任何内置方法，但这里有一种方法，它将使用 自定义值访问器 .

自定义input.component.ts

@Component({
  selector: 'app-custom-input',
  template: `
    <p>
      custom input: 
      <input
        #i
        (input)="onChangeFn($event.target.value)" 
        (blur)="onTouchedFn()"
        type="text"
        [formControl]="input"
      >
    </p>

    <p>
    inner input value: {{ i.value }}
    </p>
  `,
  providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: CustomInputComponent, multi: true, } ]
})
export class CustomInputComponent implements OnInit, ControlValueAccessor {
  input: FormControl;
  onTouchedFn: Function;
  onChangeFn: Function;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.input = this.fb.control('');
  }

  registerOnChange (fn) {
    this.onChangeFn = fn;
  }

  registerOnTouched (fn) {
    this.onTouchedFn = fn;
  }

  writeValue (v) { this.input.setValue(v); }
}

父组件.ts

  specialInput = new FormControl('', { updateOn: 'blur', validators: Validators.required });

父组件.html

<app-custom-input [formControl]="specialInput"></app-custom-input>

<p>
  Special input validation status: {{ specialInput.valid || 'false' }}
</p>

您可以将表单控件视为树结构:

FG - FormGroup; FC - FormControl

    FG
 /  |  \
FC  FC  FC

在你的情况下，当 FC已经改变了它的值(例如由于用户输入)，它的所有后代(在这种情况下 FG ，但在一个复杂的例子中可能有更多)也必须更新，不管他们的 updateOn值(value)。

按照这种方法，这棵树现在看起来像这样(假设最后一个 FC 是这样构建的):

    FG
 /  |  \_________
FC  FC | FC      |
       |   \     |
       |    FC <-- the `input` elem. in the custom component
       |_________|

结果，该值将更新 onChange在 内部 FC , 和 onBlur在 外 FC .

StackBlitz .

另外，如果您想阅读有关表单的更多信息，我建议您查看 this article .