时间戳

首页 > 解决方案 > 仅当表单有效时，角度表单才获取字段值

angular - 仅当表单有效时，角度表单才获取字段值

问题描述

我正在使用角度形式并在其字段中进行了一些验证。现在，我想在字段更改时获取字段的值，但前提是表单处于有效状态。

<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 个字符。之后我没有得到任何价值。但为什么我会得到第一个违规值？

标签： angularangular-forms

解决方案

查看源代码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']);
        }      
    });
}

推荐阅读