Угловая форма получает значение поля, только если форма действительна

Question

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

<form [formGroup]="AddEditform" novalidate autocomplete="off">
    <mat-form-field appearance="outline">
        <textarea matInput name="user" formControlName="users" id="user">
        </textarea>
        <mat-error
            *ngIf="!AddEditform.valid && AddEditform.get('users').hasError('maxlength')"
        >
            Exceeded maximum length
        </mat-error>
    </<mat-form-field>
</form>

AddEditform: FormGroup;

constructor(
  private fb: FormBuilder,
) { }

ngOnInit() {

  this.AddEditform = this.fb.group({
    users: [
      '',
      [
        Validators.maxLength(100)
      ],
    ],
  });

  this.AddEditform.get('users').valueChanges.subscribe(data => {
    if (this.AddEditform.valid) {
      console.log(data);
    }      
  });
}

В настоящее время значения печатаются до точки, когда первое нарушениепроисходит. В этом случае до 101-го символа. После этого я не получаю никаких значений. Но почему я получаю первое нарушающее значение?

Answer 1

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

Попробуйте сохранитьссылка на контроль ваших пользователей и отметьте собственный флаг valid, а не родительский.

ngOnInit() {
    this.UsersControl = this.fb.control('', [Validators.maxLength(100)]);
    this.AddEditform = this.fb.group({
        users: this.UsersControl
    });

    this.UsersControl.valueChanges.subscribe(data => {
        if (this.UsersControl.valid) {
            console.log(data);
        }      
    });
}

Либо так, либо подпишитесь на всю форму valueChanges событие.

ngOnInit() {
    this.AddEditform = this.fb.group({
        users: ['', [Validators.maxLength(100)]]
    });

    this.AddEditForm.valueChanges.subscribe(data => {
        if (this.AddEditForm.valid) {
            console.log(data['users']);
        }      
    });
}

Answer 2

также вы можете использовать этот код:

this.AddEditform.get('users').valueChanges.subscribe(data => {
  setTimeout(() => {
    if (this.AddEditform.valid) {
      console.log(data);
    }
  }, 0);
});