binding spring validators with angular 2

Question

I am using spring boot as back-end and angular 2 as front-end. My problem consist how to bind spring validators with angular 2.

For example, i implemented crud functionality with spring boot. i set the attribute quantite not empty with annotation @notEmpty(message="the quantite field should not be empty").

In the form, if the quantite field is empty and when i click on submit button, i want that spring validates the inputs.

Produit.class

public class Produit implements Serializable {
/**
 * 
 */
private static final long serialVersionUID = 1L;
@Id
@GeneratedValue
private Long id;
private String designation;

private double prix;
@NotEmpty(message="the quantite field should not be empty")
private int quantite;
...

ProduitRestService.class

    @RequestMapping(value="/produits/{id}",method=RequestMethod.PUT) 
public Produit update(@RequestBody @valid  Produit p,@PathVariable Long id)
{
    p.setId(id);  // ??????

    return produitRepository.saveAndFlush(p);
}

angular 2

add.component.html:

<form #addForm="ngForm" (ngSubmit)="onSubmit(addForm.value)" >

        <div class="md-form">

            <input type="text" id="form4"  class="form-control"  name="des" [(ngModel)]="des" >
            <label for="form4">designation!!!!!</label>


        </div>

         <div class="md-form">

            <input type="number" id="form4"  class="form-control" name="prix" [(ngModel)]="prix" >
            <label for="form4">prix</label>
        </div>

         <div class="md-form">

            <input type="number" id="form4"   class="form-control" #quantiteref="ngModel" name="quantite" [(ngModel)]="quantite" >
            <label for="form4">quantité</label>

            <div [hidden]="quantiteref.valid"  class="alert alert danger"  >  this field must not be empty</div>  // i know this validation in angular 2, but i need the work to be in spring dev
        </div>




        <div class="text-center">
            <button class="btn btn-deep-purple"  (click)="addProduct()" >ADD</button>
        </div>





       </form>

It appears to be in order, so what doesn't work, exactly? – M. Prokhorov Jul 11 '17 at 12:00 — M. Prokhorov, Jul 11 '17 at 12:00
how to pass binding from spring to angular 2 ? – Amir Choubani Jul 11 '17 at 12:22 — Amir Choubani, Jul 11 '17 at 12:22

score 0 · Answer 1 · answered Jul 11 '17 at 12:08

0

You can add a BindingResult object as a parameter of your update method.

Thus, you'll be able to check if there is any error like this :

public Produit update(@RequestBody @Valid Produit p, BindingResult result, @PathVariable Long id) {
     if (result.hasErrors()) {
         // handle error
     } else {
        // good to go
     }
}

answered Jul 11 '17 at 12:08

Thoomas

2,150
2
19
33

and how to display error in add.component.html ? this is my main problem – Amir Choubani Jul 11 '17 at 12:23
There are multiple ways. You can modify the method's return type to return JSON containing either the error or the product. Or you can throw an exception and catch it in your Angular code. Or you could also do [this](https://stackoverflow.com/questions/16232833/how-to-respond-with-http-400-error-in-a-spring-mvc-responsebody-method-returnin) – Thoomas Jul 11 '17 at 12:28
what are types of errors in result.hasErrors bloc ?? – Amir Choubani Jul 11 '17 at 12:37
@AmirChoubani, it will contain all errors found during validation. Read attached class's Javadoc. – M. Prokhorov Jul 11 '17 at 12:39
@AmirChoubani `result.getFieldErrors()` will give you the errors related to the form's validation. Reading the [documentation](https://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/validation/FieldError.html) will help you. – Thoomas Jul 11 '17 at 12:50

binding spring validators with angular 2

angular 2

1 Answers1