Send a select option to the server to edit the value in the database

JavaScript
1

Hello friends, I am trying to edit inline table with select option by using angular 7. I have already an API however I can’t send the api by choosing one option from the select tag to edit ? Can someone give me a help? thanks

2

Hello :slight_smile:!

Could You provide the code that’s not working?

3

@skaparate Thanks for your response.
I can’t provide it my code because it is in my working pc and i can’t send it my personal pc.
The idea what i have done is, there is a lists in a table in different columns but i want edit only one of the column. I did that with select option tag with angular SelectControlValue accessor. However, after select one of the option, i couldn’t send to the database that i changed on the front.

5

@camperextraordinaire Thanks for your reply

<form>
<div>
  <div *ngIf="editing">
    <select [required]="required" (blur)="onBlur($event)"  [name]="value" [(ngModel)]="value">
        <option [ngValue]="1">first name</option>
        <option [ngValue]="2">last name</option>
        <option [ngValue]="3">telephone</option>
    </select>
    {{ value }}
  </div>
  <div *ngIf="!editing">
    <a href="#" (click)="beginEdit(value)" (focus)="beginEdit(value)" tabindex="0">{{value}}</a>
  </div>
</div>
</form>



get value(): any {
    return this._value;
  }
 
  set value(v: any) {
    if(v !== this._value) {
      this._value = v;
      this.onChange(v);
    }
  }
 
  writeValue(value: any) {
    this._value = value;
  }
 
  public registerOnChange(fn: (_: any) => {}): void {
    this.onChange = fn;
 
  }
 
  public registerOnTouched(fn: () => {}): void {
    this.onTouched = fn;
  }
 
  onBlur($event: Event) {
    this.editing = false;
    if(this._value == "") {
      this._value = "No value availabel";
    }
 
  }
 
  beginEdit(value) {
    this.preValue = value;
    this.editing = true;
6

You don’t need to actually provide all the code, just the part that’s not working or at least explain with more detail what You’re trying to do.

In the meantime, read about the change event or about data binding.

7

@skaparate I have a component that has a lists in a table with 5 columns however i want to modify only a cell in one of the column by using select tag. Then i created another component to edit this column as i displayed here. Then now i want that, when i select the value, it has to be edited in the database at the same time. That is my problem. If it is not clear, i will try to explain again. Thanks for help

8

That’s a problem. It’s hard to edit something on the UI and see it reflected instantly on the Database, at least through the web (unless we’re not talking about strictly the same time). You’ll have many processes that access the data before it even reaches the database, so it’s almost impossible (unless the API doesn’t do authentication and validation).

9

@skaparate I did the api already

10

I’m sorry, but it seems to me that everything is working on your code, the only thing missing is the sending part, which is solved by using services, are You using them?

11

yes I am using services

12

Then use the service where value is updated, or You can’t? I mean, maybe You cannot use it for some technical reason, but then I would say there is a flaw in the design. Maybe this is what You don’t understand (using services)?