Wyświetlanie komunikatu o błędzie na formularzu przesłanym w angular2?

Question

Mam zaimplementowany modelowy formularz w this demo. Jeśli użytkownik nie wprowadza niczego i wysyła formularz Ja pokazuje komunikat błędu przy użyciu tej logiki

<div *ngIf="(!myForm.find('sku').valid && submitted)">**sku is required</div> 

jestem przekazując zmienną logiczną „złożony”, aby sprawdzić, czy kontrola jest ważny czy nie, gdy złożone. Czy istnieje sposób sprawdzenia stanu sterowania bez ręcznego przekazywania zmiennej? Angular2 formularze daje nam 6 klas, takich jak ng-touched, ng-untouched, ng-valid, ng-invalid, ng-pristine i ng-dirty. Chcę wyświetlić komunikat o błędzie, używając tylko tych klas.

Answer 1

Tak ...

można sprawdzić Angular form control's state jak pokazano tutaj.

Angular Form Control's Current State

import {Component,View,bind} from 'angular2/core'; 
import {FORM_DIRECTIVES,CORE_DIRECTIVES,FormBuilder, Validators } from 'angular2/common'; 
import {bootstrap}  from 'angular2/platform/browser'; 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>LOGIN</h1> 


     <form [ngFormModel]="loginForm" #fm="ngForm" (submit)="doLogin($event)"> 

     <input ngControl="name" type="text" placeholder="Your name" #name="ngForm" required> 

     <div [hidden]="name.valid || name.pristine" class="alert alert-danger">Name is required</div> 

     <br/> 

     <div>Valid ={{name.valid}}</div> 
     <div>Pristine ={{name.pristine}}</div> 
     <div>Touch ={{name.touched}}</div> 

     <BR/><BR/> 

     <input ngControl="password" type="password" placeholder="Your password" #password="ngForm" required> 

     <div [hidden]="password.valid || password.pristine" class="alert alert-danger">password is required</div> 

     <br/> 

     <div>Valid ={{password.valid}}</div> 
     <div>Pristine ={{password.pristine}}</div> 
     <div>Touch ={{password.touched}}</div> 

     <BR/><BR/> 

    <button type="submit" [disabled]="!loginForm.valid">Log in</button> 

</form> 
    `, 
    directives: [ROUTER_DIRECTIVES,FORM_DIRECTIVES,CORE_DIRECTIVES] 
}) 

export class Login { 
    constructor(fb: FormBuilder) { 
    this.loginForm = fb.group({ 
     name: ["", Validators.required], 
     password: ["", Validators.required] 
    }); 
    } 
    doLogin(event) { 
    console.log(this.loginForm); 
    event.preventDefault(); 
    } 
} 

Nie zapomnij kliknąć przycisk logowania, aby sprawdzić różne przedmioty związane z formą w konsoli przeglądarki. Ponadto próbowałem powiązać valid-invalid strip z polem tekstowym, który użyłem do implementacji w Angular1. Mam nadzieję, że to na pewno ci pomoże.

Answer 2

Chciałbym wykorzystać te pristine i/lub touched właściwości:

• Jeśli chcesz wyświetlać błędy, gdy użytkownik wypełnia coś w polu, należy użyć właściwości
• pristine Jeśli chcesz wyświetlać błędy po użytkownik położyć nacisk na polu, należy użyć właściwości

Tutaj touched jest próbka:

<div *ngIf="(!myForm.controls.sku.valid && !myForm.controls.sku.pristine)"> 
    **sku is required 
</div> 

Nadzieję, że to pomaga, Thierry

Answer 3

Musiałem pokazać transparent walidacji na górze pokazując wszystkie błędy sprawdzania poprawności formularza na przedstawienia i tylko na przedstawienia, które brzmi jak może to, co staraliśmy się zrobić .

Aktualnie program ng2 beta 17 i framework nie uniemożliwiają przesłania nieprawidłowego formularza. Przeglądarka uniemożliwi walidację html, taką jak wymagana przed przesłaniem, ale wszelkie inne niestandardowe weryfikatory nie zapobiegają przesyłaniu formularza.

Moje podejście polegało na tym, że baner podsumowujący sprawdzanie poprawności obsługiwał formularz przesłany z wywołania zwrotnego do rodzica po pomyślnym zakończeniu. Jeśli formularz jest nieprawidłowy, baner wyświetla podsumowanie i nie oddzwoni.

Konfiguracja Formularz

<form (ngSubmit)="validationSummary.submit()" [ngFormModel]="myForm"> 
<div #validationSummary form-validation-summary [form]="myForm" [validSubmitCallback]="validSubmitCallback"></div> 
... 
<button type="submit" value="SaveButton" class="Button">Save</button> 
</form> 

strona z formularzem Podsumowanie

export class SomeComponent implements OnInit { 
    ... 
    public validSubmitCallback: Function; 
    ngOnInit() { 
     this.validSubmitCallback = this.myFormSubmit.bind(this); 
    } 
    myFormSubmit() { 
     alert("a valid form was submitted"); 
    } 
} 

Validation

@Component({ 
    selector: '[form-validation-summary]' 
    ... 

export class FormValidationSummary { 
    @Input() public form: ControlGroup; 
    @Input() public validSubmitCallback: Function; 
    ... 
    submit() { 
     if (this.form.valid) { 
      this.validSubmitCallback(); 
     } else { 
      this.formSubmitted = true; 
     } 
    } 
} 

związane z ding przesłać na formularzu: https://github.com/angular/angular/issues/2960

Answer 4

Stworzyłem kątową wersję 2 wiadomości ng.

Składnia jest bardzo podobna do NG-wiadomość:

<form [formGroup]="formGroup"> 
    <label for="phoneNumber">Phone Number</label> 
    <input type="text" id="phoneNumber" name="phoneNumber" formControlName="phoneNumber" required> 
    <cl-ng-messages [control]="formGroup.get('phoneNumber')"> 
     <template clNgMessage="required"> 
     This is required 
     </template> 
     <template clNgMessage="pattern"> 
     the format of phone number is not correct 
     </template> 
    </cl-ng-messages> 
</form> 

https://github.com/changLiuUNSW/ng-messages2

Answer 5

wiem, że pytanie jest wysłana dawno temu, ale mam ten sam problem i chciałem wykorzystać kontrolę kątową stany, więc znaleźliśmy ten działa prawidłowo:

Najpierw chciałbym pokazać błąd tylko jeśli kontrola nie jest nietknięty:

<span class="help-block" 
     *ngIf="request.get('control').hasError('required') && 
      !request.get('control').pristine"> 
     This field is required! 
</span> 

Następnie można przejść koryta wszystkie kontrolki i oznaczyć je jako brudne w funkcji onSubmit:

onSubmit() { 
//validations 
this.form.updateValueAndValidity(); 
if (this.form.invalid) { 
    Object.keys(this.form.controls).forEach(key => { 
    this.form.get(key).markAsDirty(); 
    }); 
    return; 
} 

//call function for saving data 
this.save(this.form.value); 
} 

Nadzieja to pomaga