Je ne suis pas capable d'envoyer mon objet corps en deux champs de saisie angulaire

Voici Mon Modèle Principal

@NoArgsConstructor
@AllArgsConstructor
@Data
public class ItemType {
    @Id
    private String itemTypeId;
    private String typeName;
    @Indexed
    private ItemType parentItemType;
}

Voici mon backend service

public ItemType createItemType(ItemType itemType) throws ResourceAlreadyExistException, ResourceDoesNotExistException {
    Optional<ItemType> itemTypeByTypeName = itemTypeRepository.findItemTypeByTypeName(itemType.getTypeName());
    if (itemTypeByTypeName.isPresent()) {
        throw new ResourceAlreadyExistException("Type Name Is Already Exist", "Please Enter A Valid Type Name");
    }
    if (itemType.getParentItemType() != null) {
        Optional<ItemType> parentItemType = itemTypeRepository.findItemTypeByTypeName(itemType.getParentItemType().getTypeName());
        if (!parentItemType.isPresent()) {
            throw new ResourceDoesNotExistException("Parent Type Name Does not Exist", "enter a valid parent");
        }
        itemType.setParentItemType(parentItemType.get());
    }
    return itemTypeRepository.save(itemType);
}

Voici mon backend contrôleur

@PostMapping("save")
    public ResponseEntity<ItemType> saveItemType(@RequestBody ItemType itemType) {
        try {
            ItemType savedItemType = itemTypeService.createItemType(itemType);
            return new ResponseEntity<>(savedItemType, HttpStatus.CREATED);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
    }

Voici mon frontend modèle ItemType.ts

export class ItemType {
    public itemTypeId: string;
    public typeName: string;
    public parentItemType: ItemType;


    constructor(itemType?) {
        itemType = itemType || {};
        this.itemTypeId = itemType.itemTypeId || FuseUtils.generateGUID();
        this.typeName = itemType.typeName || null;
        this.parentItemType = itemType.parentItemType || null;
    }
}

Voici mon forntend service (Méthode de création)

createItemType(itemType: ItemType): Observable<any> {
      return this._apiService.post(this._create_item_type, itemType, this._httpHeaders);
    }

Voici mon avant la fin de la Composante fichier ts

public createForm(): FormGroup {
        return this._formBuilder.group({
            typeName: [this.itemType.typeName, Validators.required],
            parentItemType: [this.itemType.parentItemType]
        });
    }

    public saveForm(itemType: ItemType, formDirective: FormGroupDirective): void {
        this.createItemType(itemType, formDirective);
    }

private createItemType(itemType: ItemType, formDirective: FormGroupDirective): void {
        this.itemTypeService.createItemType(itemType).map((data) => {
            Utils.showAlert('success', 'Success', 'New Item type has been added!');
            formDirective.resetForm();
        }).subscribe(
            () => {
                // console.log(' NO ERROR FOUND ');
            },
            (error) => {
                Utils.showAlert('error', 'Oops...', error.headers.get('messageDescription'));

                // console.log(JSON.stringify(error));
            }, () => {
                // console.log(' FINAL RESULT ');
            });
    }

Voici mon frontend fichier html

<mat-tab-group>

                <mat-tab label="Types">
                    <form name="form" [formGroup]="form" #formDirective="ngForm" class="product w-100-p" fxLayout="column"
                          fxFlex (ngSubmit)="saveForm(form.value, formDirective)">
                        <div class="tab-content p-24" fusePerfectScrollbar fxLayout="column">
                            <div fxLayout="row" fxLayoutAlign="space-between">
                                <mat-form-field appearance="outline" floatLabel="always" fxFlex="48">
                                    <mat-label>Type Name</mat-label>
                                    <input matInput placeholder="Type Name"
                                           name="typeName"
                                           formControlName="typeName" required>
                                </mat-form-field>

                                <mat-form-field appearance="outline" floatLabel="always" fxFlex="48">
                                    <mat-label>Parent Type Name</mat-label>
                                    <input type="text" matInput placeholder="Parent Type Name"
                                           name="Parent Type Name"
                                           formControlName="parentItemType" [matAutocomplete]="itemType">
                                    <mat-autocomplete #itemType="matAutocomplete">
                                        <mat-option>

                                        </mat-option>
                                    </mat-autocomplete>
                                </mat-form-field>
                            </div>

                            <button type="submit" class="mat-accent" mat-raised-button>
                                SAVE
                            </button>

                        </div>
                    </form>

                </mat-tab>

            </mat-tab-group>

Je veux envoyer ce type de fichier JSON

{
    "typeName" : "Chair",
    "parentItemType": {
        "typeName": "Furniture"
    }
}

Initialement parenTypeName sera nulle. Après avoir créé un type parent en vertu de ce type parent je suis en train d'envoyer "Président" en vertu de la parent de type "Meubles", mais a échoué. Alors, comment puis-je envoyer cette JSON?

0
2019-09-17 09:26:10
source
0 réponses

Voir d'autres questions sur les étiquettes