Как проверить значение formControl только при отправке?

Question

Следующий код проверяет ввод username в valueChanges.Как проверить ввод username только после отправки?(т. е. дождаться события submit и не проверять каждое значение valueChange?)

      this.formCtls['username'].valueChanges.pipe(
        filter<String>(text=>text.length > 2),
        debounceTime(10),
        distinctUntilChanged(), 
        . . . 

Кроме того, дополнительный вопрос, который, вероятно, не настолько важен, чтобы его можно было открыть как целый новый вопрос.,,,: как указано выше, почему мой редактор заставляет меня добавить универсальный <String> рядом с filter?В Интернете я видел несколько фрагментов кода:

      this.formCtls['username'].valueChanges.pipe(
        filter(text=>text.length > 2),
        debounceTime(10),
        distinctUntilChanged(), 

, но без <String>, мой редактор (код Visual Studio) жалуется, что property 'length' does not exist on type 'unknown', и единственный способ исправить это - добавить <String> тип после filter.

Answer 1

Если вы не возражаете, что поле обновляется до отправки, вы можете вызвать updateOn: submit в элементе управления формы, например:

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    field1: ['', { updateOn: 'submit'}]
  })

  this.myForm.get('field1').valueChanges.pipe(
    filter(text=>text.length > 2),
  )
  .subscribe(val => console.log(val))
}

Но при этом значение формы не обновляет этополе до отправки, поэтому важно запомнить.

STACKBLITZ

Но я также не понимаю, почему вы не смогли справиться с некоторымиЛогика для управления формой также в функции submit, если вам нужно сделать что-то подобное.

Answer 2

Решение:

<form name="myForm"> <input ng-model="modelobject" ng-model-options="{updateOn: 'submit'}"> <button id="confirmButton" role="confirm" class="confirm-btn"> Confirm </button> </form>