Обновление модели угловой реактивной формы со значениями извне

Question

Я думаю, что у меня есть очень распространенный вопрос об обработке форм в угловом формате, но я не нашел ответа на свой вопрос после поиска и чтения в течение нескольких часов.

Проблема:
Я построил реактивную форму, и если пользователь находится в угловом контексте (ввод значений и т. Д.), Все в порядке.Но когда я использую плагин Chrome, такой как Заполнитель форм веб-разработчика и заполняю им форму, модель не обновляется.

Чтобы воспроизвести проблему, я создал крошечное приложениездесь: https://stackblitz.com/edit/angular-ltrmpd.

Контроллер формы:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  form = new FormGroup({
    name: new FormControl('Valid name', [
      Validators.required,
      Validators.minLength(5)
    ])
  });

  get name() { return this.form.get('name'); }

  onSubmit() {
    // reload all form data and revalidate, but how?

    if (this.form.valid) {
      alert('VALID');
    }
  }
}

Вид формы:

<code><form [formGroup]="form" (ngSubmit)="onSubmit()">

  <div class="form-group row">
    <label for="name" class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
      <input formControlName="name" type="text"class="form-control" id="name" [class.is-invalid]="name.invalid && name.touched" />
      <pre class="invalid-feedback">{{ name.errors | json }}

{{ form.value | json }}

form.valid: {{ form.valid }}

УСТАНОВИТЬ ЗНАЧЕНИЕ СНАРУЖИ модель не обновляетсяSET VALUE ANGULAR WAY Правильно обновляет модельОтправить

• Значение формы по умолчанию действительно
• Нажмите кнопку «УСТАНОВИТЬ ЗНАЧЕНИЕ СНАРУЖИ» -> модель не обновляется
• Нажмите «Отправить» -> Вы не сможете нажать кнопку, или мы вручную обновим модель и состояние проверки после нажатия кнопки

Самое простое решение, которое я пробовал, - обновить модельи выполнить повторную проверку после того, как пользователь отправит форму.Но как я могу обновить модель с текущими значениями формы?

Я только нашел этот вопрос: Как обновить поле формы Angular 2 Reactive, когда изменения произошли за пределами мира Angular .Но я думаю, что это не та же проблема, потому что я не имею никакого контроля над инструментами заполнения форм.

Answer 1

Я искал то же событие и, наконец, посмотрел на реализацию реактивной формы в пакете @angular/core, после чего произошло событие input привязки к элементу формы, которое отвечает за запуск валидатора, присоединенного к этому элементу формы, и обновление FormControlName.

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

Пример -

var event = new Event("input");
element.dispatchEvent(event);

, если вам нужно больше информации оРеактивная реализация формы, тогда вы можете найти ее ниже.

Примечание. - Ниже указывается номер строки default_value_accessor.ts файла.

В строке 68- у нас есть привязка входного события к элементу хоста, который в конечном итоге вызывает _handleInput

host:      {
'(input)': '$any(this)._handleInput($event.target.value)',
'(blur)': 'onTouched()',
'(compositionstart)': '$any(this)._compositionStart()',
'(compositionend)': '$any(this)._compositionEnd($event.target.value)'
},

Строка 134 - у нас есть _handleInput определение, которое выполняет onChange обратный вызов, который отвечает за запуск _executeValidators функцииот validator.ts .

/**@internal*/
_handleInput(value: any): void {
   if (!this._compositionMode || (this._compositionMode && !this._composing)) {
      this.onChange(value);
    }
}