Como validar campos de entrada, um por um em Angular 6

votos
1

Eu sou novo para angular aqui eu estou tentando validar um pequeno formulário .Neste caso tudo está funcionando bem.

O que eu quero fazer é se um usuário clicar no botão SALVAR sem tocar os campos do formulário I deseja exibir a mensagem de erro no primeiro campo só que em vez de todos os campos.

Agora ele está mostrando mensagem de erro em todos os campos que estraga a aparência.

Então, como para mostrar a mensagem de erro na primeira arquivado se o usuário clicou no botão salvar sem digitar nada no form.It deve funcionar se o usuário digitar algo no segundo campo e clique no botão Salvar que mensagem de erro primeiro show no primeiro campo, se novamente usuário clique no botão Salvar ele deve mostrar mensagem de erro no terceiro campo, porque segundo é validar antes.

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

Alguém pode me ajudar a fazer isso de forma eficaz.

Obrigado .

Publicado 20/09/2018 em 04:34
fonte usuário
Em outras línguas...                            


1 respostas

votos
0

Concordo com @Lazar Ljubenović que esta é uma má idéia. No entanto, se é o que você realmente quer ...

Eu gostaria de acrescentar um método de envio da seguinte forma:

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

e no método de enviar fazer algo como isto:

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)
}

Isto irá armazenar o nome do primeiro campo com um erro em uma string.

Em seguida, alterar as mensagens de erro HTML para algo como isto:

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

Este prov precisa de alguns ajustes para finalizar a execução, mas você começa a idéia áspera.

Respondeu 20/09/2018 em 05:17
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more