Komunikat sprawdzania poprawności po stronie serwera Angular 2 (Beta)

Poszukuję eleganckiego sposobu wyświetlania komunikatów sprawdzania poprawności z interfejsu API po stronie serwera bez konieczności tworzenia niestandardowych weryfikatorów lub twardego kodowania wszystkich możliwych komunikatów w interfejsie użytkownika.Komunikat sprawdzania poprawności po stronie serwera Angular 2 (Beta)

Potrzebuję dodać komunikaty o błędach do określonych pól, a także do całego formularza.

To musi działać w ruchu obrotowym 2.0.0-beta.3

Źródło

2016-02-08 Steve Powell

przedstawiam wam funkcję displayErrors ostateczne (Uchwyty boczne validations serwera następującego po JSONAPI Standard):

Musisz underscore.js

displayErrors(error: ErrorResponse) { 
    let controls = this.supportRequestForm.controls; 
    let grouped = _.groupBy(error['errors'], function(e) { 
    return e['source']['pointer']; 
    }); 
    _.each(grouped, function(value, key, object) { 
    let attribute = key.split('/').pop(); 
    let details = _.map(value, function(item) { return item['detail']; }); 

    controls[attribute].setErrors({ remote: details.join(', ') }); 
    }); 
}

Źródło

2016-12-05 08:43:55 user1262904

Istnieją dwa rodzaje walidacji serwera:

te globalne (dla całego formularza lub odpowiadające błędu podczas formie uległość)
Te związane z polami

dla jednego wystarczy wyodrębnić wiadomości z ładunkiem reakcji i umieścić go na własność swojego składnika aby wyświetlić go w odpowiednią Szablon:

@Component({ 
    (...) 
    template: ` 
    <form (submit)="onSubmit()"> 
     (...) 
     <div *ngIf="errorMessage">{{errorMessage}}</div> 
     <button type="submit">Submit</button> 
    </form> 
    ` 
}) 
export class MyComponent { 
    (...) 

    onSubmit() { 
    this.http.post('http://...', data) 
      .map(res => res.json()) 
      .subscribe(
       (data) => { 
       // Success callback 
       }, 
       (errorData) => { 
       // Error callback 
       var error = errorData.json(); 
       this.error = `${error.reasonPhrase} (${error.code})`; 
       } 
      ); 
    } 
}

Zakładam, że ładowność reakcja na błąd jest JSON jeden i odpowiada na następujące kwestie:

{ 
    "code": 422, 
    "description": "Some description", 
    "reasonPhrase": "Unprocessable Entity" 
}

dla drugiego, można ustawić otrzymał błąd komunikat ciągu poleceń związanych z wejściami formy, jak to opisano poniżej:

@Component({ 
    (...) 
    template: ` 
    <form [ngFormModel]="myForm" (submit)="onSubmit()"> 
     (...) 
     Name: <input [ngFormControl]="myForm.controls.name"/> 
     <span *ngIf="myForm.controls.name.errors?.remote"></span> 
     (...) 
     <button type="submit">Submit</button> 
    </form> 
    ` 
}) 
export class MyComponent { 
    (...) 

    constructor(builder:FormBuilder) { 
    this.myForm = this.companyForm = builder.group({ 
     name: ['', Validators.required ] 
    }); 
    } 

    onSubmit() { 
    this.http.post('http://...', data) 
      .map(res => res.json()) 
      .subscribe(
       (data) => { 
       // Success callback 
       }, 
       (errorData) => { 
       // Error callback 
       var error = errorData.json(); 
       var messages = error.messages; 
       messages.forEach((message) => { 
        this.companyForm.controls[message.property].setErrors({ 
        remote: message.message }); 
       }); 
       } 
      ); 
    } 
}

zakładać, że ładunek odpowiedzi na błędy jest JSON jeden i spełnia następujące:

{ 
    messages: [ 
    { 
     "property": "name", 
     "message": "The value can't be empty" 
    ] 
}

Więcej szczegółów można rzucić okiem na ten projekt:

Źródło

2016-02-09 06:48:38

Linki wydaje się być martwy. – DDiVita

@DDiVita Naprawiłem linki. – Ergwun

Komunikat sprawdzania poprawności po stronie serwera Angular 2 (Beta)

Odpowiedz

Powiązane problemy