CODEWITHSUNDEEP
angular
Michael
Michael

Reputation: 13636

Values not set when I post my form to server

I use angular 8 in my project.

Here is my form:

<div class="row mt-5">
    <div class="col-md-6 mx-auto">
        <h2 class="text-center">New fridge</h2>
        <div class="card mt-3">
            <div class="card-body">
              <form [formGroup]="newFridgeForm" (ngSubmit)="onSubmit()">
                <div class="form-group">
                  <label class="col-md-4">Fridge name </label>
                  <input type="text" class="form-control" formControlName="name"/>

                  <label class="col-md-4">Product type </label>
                  <!-- <input type="text" class="form-control" formControlName="description"/> -->
                  <select class="custom-select" formControlName="fridgeTypeId">
                    <option value="">Choose type</option>
                    <option *ngFor="let pt of fridgeTypes" [ngValue]="pt.id">{{pt.text}}</option>
                 </select>  
                 <label class="col-md-4">Date Creation </label>
                 <input type="text" class="form-control" formControlName="date" value="{{dateVal | date: 'M/dd/yyyy'}}" readonly/>  
                 <input type="hidden" class="form-control" formControlName="uid" value="{{this.authenticationService.currentUserValue.id}}"/> 
                 </div>
                  <div class="form-group">
                    <button type="submit" class="btn btn-primary col-md-4" [disabled]="newFridgeForm.invalid">
                        <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
                      Add
                    </button>
                    <a [routerLink]="['/fridgeList']">
                    <button type="submit" class="btn btn-primary col-md-4 ml-1">Back</button>
                  </a>
                 </div>
              </form>
            </div>
        </div>
    </div>
  </div>

Here how it looks:

enter image description here

As you can see I have id form that is hidden and date that display current date and it's not editable .

And here is form group in TypeScript:

this.newFridgeForm = this.formBuilder.group({
  name: ['', Validators.required],
  fridgeTypeId: ['', Validators.required]
  uid: [''],
  date: ['']
});

}

And here is how I sent form group values to server after Add butten is hitted:

this.fridgeService.save(this.newFridgeForm.value)
.subscribe(
  data => {
      this.loading = false;
      this.alertService.success('Add new product', true);
      this.router.navigate(['/productList']);        
  },
  error => {
      this.alertService.error(error);
      this.loading = false;
  });

When I check in console window it looks like this:

enter image description here

while I expect that that all fields will have value including date and uid.

Why date and uid is empty?

Upvotes: 0

Views: 55

Answers (2)

Ali Wahab
Ali Wahab

Reputation: 592

Remove value from your HTML and set those values in your form like this and I am sure it will work.

<input type="hidden" class="form-control" formControlName="uid"/> 

this.newFridgeForm = this.formBuilder.group({
  name: ['', Validators.required],
  fridgeTypeId: ['', Validators.required],
  uid: [this.authenticationService.currentUserValue.id],
  date: [dateVal]
});

formControlName="uid" will automatically bind the current user id

Upvotes: 1

Dino
Dino

Reputation: 8292

I suggest you not to use value attribute in your HTML elements as it doesn't have two-way binding. Either use [(ngModel)]or if you are dealing with forms, use formControlName. In some cases you are using both formControlName and value. For example in uid input, you should remove value attribute, and in your component set the uid control accordingly:

this.newFridgeForm.controls.uid.setValue(this.authenticationService.currentUserValue.id);

Upvotes: 0

Related Questions