Friday, 9 November 2018

Submit form data with selected drop down

I want to update form data when I update select drop down and click submit button. I tried to implement this:

Component:

@Component({
  selector: 'app-contract',
  templateUrl: './contract.component.html',
  styleUrls: ['./contract.component.scss']
})
export class ContractComponent implements OnInit {

  contract: Contract = new Contract(null, null, null, null, null);
  merchants: MerchantList[];

  edit = false;

  valueExists = false;

  constructor(private contractService: ContractService,
              private merchantService: MerchantService,
              private router: Router,
              private route: ActivatedRoute) {
  }

  ngOnInit() {

    this.route.params.pipe(
      flatMap(params => {
        if (params['id']) {
          return this.contractService.get(params['id']);
        } else {
          return of(null);
        }
      })
    ).subscribe(value => {
      if (value != null) {
        this.contract = value;
        this.edit = true;
      }
    });

    this.merchantService.getMerchantsList()
     .subscribe(value => {
        if (value != null) {
          this.merchants = value;
        }
    });
  }

  clear() {
    this.contract.name = null;
  }

  submit() {
    if (this.edit) {
      this.contractService.persist(this.contract).subscribe(() => {
        this.router.navigate(['panel', 'contracts', 'list']);
      })
    } else {
      this.contractService.save(this.contract).subscribe(() => {
          this.router.navigate(['panel', 'contracts', 'list']);
        },
        error => this.handleError(error.error));
    }
  }

  handleError(error: string) {
    if (error === 'TRANSACTION_EXISTS') {
      this.valueExists = true;
    }
  }
}

HTML code:

<h1 class="title">New Contract</h1>

<form class="grid-wrapper" #f="ngForm">
  <div *ngIf="edit" class="form-group id">
    <label for="id">Transaction ID</label>
    <input id="id" type="text" name="id" class="form-control" disabled [(ngModel)]="contract.id">
  </div>

  <div class="form-group name">
    <label for="name">Contract name</label>
    <input id="name" type="text" name="name" class="form-control" required [(ngModel)]="contract.name">
  </div>

  <div class="form-group type">
    <div class="input-group-prepend">
      <label for="type">Merchant</label>
    </div>
    <select class="custom-select" name="type" [(ngModel)]="contract.merchant_id" id="merchant_id" required>
      <option selected>Please Select...</option>
      <option [value]="merchant.id" *ngFor="let merchant of merchants"></option>
    </select>
  </div>

  <div class="btn-row">
    <button class="btn btn-primary" [disabled]="f.invalid" (click)="submit()">Submit</button>
    <button class="btn btn-secondary" (click)="clear()">Clear</button>
  </div>

</form>

Strings in input field is updated but I can't find why when I select different value from the drop down value it's not updated.

Can you give me some advice where I'm wrong?



from Submit form data with selected drop down

No comments:

Post a Comment