Tworzę formularz kątowy 6 z walidowaniem. Chcę wyświetlać komunikaty o błędach tylko po przesłaniu formularza. Ważnym faktem jest to, że wiadomości nie powinny się zmieniać podczas pisania. Więc na przykład, gdy użytkownik nie wpisał niczego w wejściu, a następnie przesłał formularz, powinny pojawić się wymagane wiadomości. Po tym, gdy pojawiają się coś użytkownika, wiadomości powinny być widoczne przez cały czas do momentu naciśnięcia kolejnego przycisku Subtted. Również komunikaty o błędach nie powinny zmieniać się na drugim, gdy poprzednia zasada została spełniona. Szczerze mówiąc Nie wiem, czy jest to możliwe przy użyciu formularzy reaktywnych.

App.component.html

<form [formGroup]="form" novalidate (ngSubmit)="submit()" #myform="ngForm">
    <input class="input" type="text" formControlName="firstName" />   
    <p *ngIf="form.get('firstName').hasError('required') && myform.submitted">
      Name is required
    </p>
    <p *ngIf="form.get('firstName').hasError('minlength') && myform.submitted">
      Min length of string is {{form.controls.firstName.errors.minlength.requiredLength}}    
    </p>
    <button type="submit">Submit</button>
</form> 

App.component.ts

export class AppComponent  {
  form: FormGroup
  constructor(private fb: FormBuilder,) {
      this.form = this.fb.group({
          firstName: ['', [Validators.required, Validators.minLength(5)]]
      });
  }

  submit() {
    console.log(this.form);
  }
}

DEMO: Stackblitz

Dzięki za pomoc!

5
hetious 22 luty 2019, 11:02

2 odpowiedzi

Najlepsza odpowiedź

Z kątu 7 można użyć: {Updateon: 'Usuń'} lub {Updateon: 'Blur'}

* Aktualizacja przy użyciu nowej Formgroup i New FormControl (przy użyciu FormBuilder nie działa)

Użyj {Updateon: 'Blur'} Jeśli chcesz poprawić błąd, zostanie utracona ostrość wejścia, {Updateon: "Prześlij"} Jeśli tylko po przesłaniu

this.form = new FormGroup({
        firstName:new FormControl('', 
          [Validators.required, Validators.minLength(5)])
      },{updateOn:'submit'});

* Aktualizacja 2 Jeśli chcesz używać z Formbuilder See Odpowiedź na q w stackoverflow

7
Eliseo 22 luty 2019, 12:52

Możesz sprawdzić walidacja w takim funkcie Prześlij:

<p *ngIf="requiredError">
  Name is required
</p>
<p *ngIf="invalid">
  Min length of string is {{form.controls.firstName.errors.minlength.requiredLength}}    
</p>

  invalid: boolean;
  requiredError: boolean;
  submit() {
    console.log(this.form);
    this.invalid = this.form.get('firstName').hasError('minlength');
    this.requiredError = this.form.get('firstName').hasError('required');
  }
2
ferhado 22 luty 2019, 09:06