When recording I get a bad request using angle 6

-2
When I try to write to the database, I get a (400) bad request error, when I enter postman two fields of an object type returns an empty array ([ ). I'm sure that sending the data is wrong, but I'm not getting it right. The method is OnPostCreateApplicability . This is my component:

@Component({
  selector: 'app-create-applicability',
  templateUrl: './create-applicability.component.html',
  styleUrls: ['./create-applicability.component.css']
})
export class CreateApplicabilityComponent implements OnInit {

  createForm: FormGroup;
  private _createAplicabilty: Model.ApplicabilityModel;
  private dataSourcePayment: Model.TypePaymentItem[];
  private dataSourceDelivery: Model.TypeDeliveryItem[];

  constructor(private _createAppService: ApplicabilityService, private builder: FormBuilder) { 
    this.createForm = this.builder.group({
      name: '',
      context: '',
      typePaymentDetailsModel: '',
      typeDeliveryDetailsModels: '',
      marketPlace: ''
    })
  }

  ngOnInit() { 

    this._createAppService
    .getAllDelivery<Model.Result<Model.TypeDeliveryItem>>()
    .subscribe((data: Model.Result<Model.TypeDeliveryItem>) => {
      this.dataSourceDelivery = data.itens;
    }); 

    this._createAppService
    .getAllPayment<Model.Result<Model.TypePaymentItem>>()
    .subscribe((data: Model.Result<Model.TypePaymentItem>) => {
      this.dataSourcePayment = data.itens;
    });
  }

  onPostCreateApplicability(){
    let formValue = this.createForm.value;
    debugger;
    this._createAplicabilty = {
      name: formValue.name,
      context: formValue.context,
      typePaymentDetailsModel:{
        id: formValue.id,
        sgpTypePaymentId: formValue.sgpTypePaymentId,
        name: formValue.name
      },
      typeDeliveryDetailsModels:{
        id: formValue.id,
        sgpTypeDeliveryId: formValue.sgpTypeDeliveryId,
        name: formValue.name
      },
      marketPlace: formValue.marketPlace
    };

    debugger;
    this._createAppService.postCreateApplicability(this._createAplicabilty)
        .subscribe( success => {
          if(success.Result){
        }
      },
        error =>{
      }
    );

  }
}

My Model

declare namespace Model{

    export interface ApplicabilityModel{
        name: string,
        context: string,
        typePaymentDetailsModel: TypePayment,
        typeDeliveryDetailsModels: TypeDelivery,
        marketPlace: boolean
    }

    export interface TypePayment{
        id: string,
        sgpTypePaymentId: number,
        name: string
    }

    export interface TypeDelivery{
        id: string,
        sgpTypeDeliveryId: number,
        name: string
    }
} 

My Model Result

export interface ApplicabilityItem{
        name: string,
        context: string,
        typePaymentDetailsModel: TypePaymentItem,
        typeDeliveryDetailsModels: TypeDeliveryItem,
        marketPlace: boolean
    }

    export interface TypePaymentItem{
        id: string,
        sgpTypePaymentId: number,
        name: string
    }

    export interface TypeDeliveryItem{
        id: string,
        sgpTypeDeliveryId: number,
        name: string
    }

My HTML.

<div class="container">
    <form [formGroup]="createForm" (ngSubmit)="onPostCreateApplicability()" style="width:400px; margin: 0 auto;">
      <h1>Criar Aplicabilidade</h1>

      <div class="required-field-block">
          <input formControlName="name" type="text" placeholder="Nome" class="form-control">
          <div class="required-icon">
              <div class="text">*</div>
          </div>
      </div>

      <div class="required-field-block">
          <input formControlName="context" type="text" placeholder="Contexto" class="form-control">
          <div class="required-icon">
              <div class="text">*</div>
          </div>
      </div>

      <div>
        <mat-form-field>
          <mat-select formControlName="typePaymentDetailsModel" placeholder="Tipo de Pagamento" name="payment">
            <mat-option  *ngFor="let payment of dataSourcePayment" [value]="payment.id">   
              {{payment.name}}            
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

      <div>
          <mat-form-field>
            <mat-select formControlName="typeDeliveryDetailsModels" placeholder="Tipo de Entrega"  name="delivery">
              <mat-option  *ngFor="let delivery of dataSourceDelivery" [value]="delivery.id">   
                {{delivery.name}}
              </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

      <button type="submit" class="btn btn-primary" >Criar</button>
  </form>
  </div>

By Swagger the API expects this

{
  "id": "string",
  "name": "string",
  "context": "string",
  "typeDeliveryDetailsModels": [
    {
      "id": "string",
      "sgpTypeDeliveryId": 0,
      "name": "string"
    }
  ],
  "typePaymentDetailsModel": [
    {
      "id": "string",
      "sgpTypePaymentId": 0,
      "name": "string"
    }
  ],
  "marketPlace": true
}

Mounting the code below in the Postman typePaymentDetailsModel comes empty

{
  "name": "tesando a bagaça",
  "context": "contexto-bagaça",
  "typeDeliveryDetailsModels": [
    {
        "id": "75c7fdbb-82b7-4e2f-ac03-3696883820f4",
        "sgpTypeDeliveryId": 1,
        "name": "Bahia"
    }
  ],
  "typePaymentDetailsModel": [
    {
      "id": "00dfea8b-4265-42d2-842a-2b854bfcc4dc",
      "sgpTypePaymentId": 2,
      "name": "Crédito"
    }
  ],
  "marketPlace": true
}

Postman return with the above code

{
    "id": "ec32d1bc-5d36-4875-83dc-829d2b9b4dcc",
    "name": "tesando a bagaça1",
    "context": "contexto-bagaça1",
    "typePaymentDetailsModels": [
        {
            "id": "00dfea8b-4265-42d2-842a-2b854bfcc4dc",
            "sgpTypePaymentId": 2,
            "name": "Crédito"
        }
    ],
    "typeDeliveryDetailsModels": [],
    "marketPlace": true
}

The problem is that when I enter, it returns a (400) bad request . How do I resolve this?

    
asked by anonymous 24.07.2018 / 21:15

1 answer

0

I've solved the code below

My current component

export class CreateApplicabilityComponent implements OnInit {

  createForm: FormGroup;
  private _createAplicabilty: Model.ApplicabilityModel;
  private dataSourcePayment: Model.TypePaymentItem[];
  private dataSourceDelivery: Model.TypeDeliveryItem[];

  constructor(private _createAppService: ApplicabilityService, private builder: FormBuilder) { 
    this.createForm = this.builder.group({
      name: '',
      context: '',
      typePaymentDetailsModel: '',
      typeDeliveryDetailsModels: '',
      marketPlace: true
    })
  }

  ngOnInit() { 

    this._createAppService
    .getAllDelivery<Model.Result<Model.TypeDeliveryItem>>()
    .subscribe((data: Model.Result<Model.TypeDeliveryItem>) => {
      this.dataSourceDelivery = data.itens;
    }); 

    this._createAppService
    .getAllPayment<Model.Result<Model.TypePaymentItem>>()
    .subscribe((data: Model.Result<Model.TypePaymentItem>) => {
      this.dataSourcePayment = data.itens;
    });
  }

  onPostCreateApplicability(){
    let formValue = this.createForm.value;

     this._createAplicabilty = this.createForm.value;

    debugger;
    this._createAppService.postCreateApplicability(this._createAplicabilty)
        .subscribe( success => {
          if(success.Result){
        }
      },
        error =>{
      }
    );
  }

My HTML

<div class="container">
    <form [formGroup]="createForm" (ngSubmit)="onPostCreateApplicability()" style="width:400px; margin: 0 auto;">
      <h1>Criar Aplicabilidade</h1>

      <div class="required-field-block">
          <input formControlName="name" type="text" placeholder="Nome" class="form-control">
          <div class="required-icon">
              <div class="text">*</div>
          </div>
      </div>

      <div class="required-field-block">
          <input formControlName="context" type="text" placeholder="Contexto" class="form-control">
          <div class="required-icon">
              <div class="text">*</div>
          </div>
      </div>

      <div>
        <mat-form-field>
          <mat-select multiple formControlName="typePaymentDetailsModel" placeholder="Tipo de Pagamento" name="payment">
            <mat-option  *ngFor="let payment of dataSourcePayment" [value]="payment">   
              {{payment.name}}            
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

      <div>
          <mat-form-field>
            <mat-select multiple formControlName="typeDeliveryDetailsModels" placeholder="Tipo de Entrega"  name="delivery">
              <mat-option  *ngFor="let delivery of dataSourceDelivery" [value]="delivery">   
                {{delivery.name}}
              </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

      <button type="submit" class="btn btn-primary" >Criar</button>
  </form>
  </div>

Model

export interface ApplicabilityModel{
        name: string,
        context: string,
        typePaymentDetailsModel: TypePayment[],
        typeDeliveryDetailsModels: TypeDelivery[],
        marketPlace: boolean
    }

    export interface TypePayment{
        id: string,
        sgpTypePaymentId: number,
        name: string
    }

    export interface TypeDelivery{
        id: string,
        sgpTypeDeliveryId: number,
        name: string
    }
    
25.07.2018 / 00:28