如何在Angular 6中逐个验证输入字段-Java 学习之路

我在这里很有角度我试图验证一个小形式 . 在这种情况下一切正常 .

我想要做的是，如果用户单击SAVE按钮而不触及表单字段，我只想在第一个字段中显示错误消息而不是所有字段 .

现在它在所有破坏外观和感觉的字段中显示错误消息 .

因此，如果用户点击SAVE按钮而没有在表单中输入任何内容，如何在首次提交时显示错误消息 . 如果用户在第二个字段上输入内容并单击“保存”按钮，它将首先显示第一个字段上的错误消息，如果再次显示错误消息用户点击保存按钮它应该在第三个字段上显示错误消息，因为第二个字段之前是验证 .

app.component.ts

export class InputErrorStateMatcherExample {
  userAddressValidations: FormGroup;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.userAddressValidations = this.formBuilder.group({
      firstName: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(20), Validators.pattern('[a-zA-Z]+')]],
      lastName: ['', [Validators.required, Validators.minLength(4),Validators.maxLength(20)]],
       location: ['', [Validators.required, Validators.minLength(4),Validators.maxLength(20)]]
    });

  }
}

app.component.html

<form class="example-form" [formGroup]="userAddressValidations">
    <mat-form-field class="example-full-width">
        <input matInput placeholder="First Name" formControlName="firstName">
        <mat-error *ngIf="userAddressValidations.get('firstName').hasError('required')">
            First Name is Required!
        </mat-error>
        <mat-error *ngIf="userAddressValidations.get('firstName').hasError('minlength')">
            First Name should be atleast 4 characters long!
        </mat-error>

        <mat-error *ngIf="userAddressValidations.get('firstName').hasError('maxlength')">
            First Name can be atmax n characters long!
        </mat-error>

        <mat-error *ngIf="userAddressValidations.get('firstName').hasError('pattern')">
            First Name must follow this pattern!
        </mat-error>
    </mat-form-field>

    <mat-form-field class="example-full-width">
        <mat-label>Last Name</mat-label>
        <input matInput formControlName="lastName">
        <mat-error *ngIf="userAddressValidations.get('lastName').hasError('required')">
            Please fill out this field.
        </mat-error>
        <mat-error *ngIf="userAddressValidations.get('lastName').hasError('minlength')">
            Minimum 4 characters required.
        </mat-error>
        <mat-error *ngIf="userAddressValidations.get('lastName').hasError('maxlength')">
            Accepts only 20 characters.
        </mat-error>
    </mat-form-field>

    <mat-form-field class="example-full-width">
        <mat-label>Location</mat-label>
        <input matInput formControlName="lastName">
        <mat-error *ngIf="userAddressValidations.get('location').hasError('required')">
            Please fill out this field.
        </mat-error>
        <mat-error *ngIf="userAddressValidations.get('location').hasError('minlength')">
            Minimum 4 characters required.
        </mat-error>
        <mat-error *ngIf="userAddressValidations.get('location').hasError('maxlength')">
            Accepts only 20 characters.
        </mat-error>
    </mat-form-field>

    <button mat-raised-button  color="warn">
      <span>Save</span>
  </button>
</form>

Stackblitz：https://stackblitz.com/edit/angular-mat-form-validation-eg-avw2qh?file=app%2Finput-error-state-matcher-example.html

任何人都可以帮助我以有效的方式做到这一点 .

谢谢 .

1 回答

我同意@LazarLjubenović这是一个坏主意 . 但是，如果这是你真正想要的......

我会添加一个这样的提交方法：

<form class="example-form" [formGroup]="userAddressValidations" (ngSubmit)="onSubmit()">

并在提交方法中执行以下操作：

onSubmit() {
  const props = Object.keys(this.userAddressValidations.value)
  this.firstError = null
  props.forEach((prop) => {
    if (!this.firstError && this.userAddressValidations.get(prop).errors) {
      console.log('setting firstError', prop, this.userAddressValidations.get(prop).errors)
      this.firstError = prop
    }
  })
  console.log('firstError', this.firstError)
}

这将存储第一个字段的名称，并在字符串中显示错误 .

然后将HTML错误消息更改为以下内容：

<mat-error *ngIf="userAddressValidations.get('firstName').hasError('required') && firstError === 'firstName'">
    First Name is Required!
</mat-error>

这个问题将需要一些调整来完成实现，但你得到了粗略的想法 .

回复于 2024-04-20T13:17:46+08:00

如何在Angular 6中逐个验证输入字段

1 回答

相关问题