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