2

I have an application in which you can add or edit values to a database.

I want to make it so that when I set one parameter to anything (it is empty by default) the second parameter gets set to a specific value.

Further explanation on what I'm actually trying to do:

HTML code:

<form class=form-group>
    <td><label>Status Code</label></td>
    <input type="text" #StatusCode (ngModel)="StatusCodes" value="{{StatusCodes}}">
</form>                                         

<form class=form-group>
    <td><label>Eta</label></td>
    <input type="text" #Eta (ngModel)="Etas" value="{{Etas}}">
</form>
<form class=form-group>
    <td><label>Etd</label></td>
    <input type="text" #Etd (ngModel)="Etds" value="{{Etds}}">
</form>
<form class=form-group>
    <td><label>Ata</label></td>
    <input type="text" #Ata (ngModel)="Atas" value="{{Atas}}">
</form>
<form class=form-group>
    <td><label>Atd</label></td>
    <input type="text" #Atd (ngModel)="Atds" value="{{Atds}}">
</form>

The StatusCodes has a default value of "announced" and only Eta has a specified value (other 3 are empty). Upon entering a value for Ata I want to have the StatusCodes value to automatically be set to "inport".

I'm guessing ngswitch could be used in this situation but I don't know how. What would be the syntax for it in this case?

If there's better way to get this behaviour please advise me on how I'd achieve this.

ire
  • 491
  • 2
  • 12
  • 26

1 Answers1

2

I don't think ngSwitch will help you, as it's basically just an extension of ngIf - so for showing and hiding DOM elements. By far the most robust option is to handle it explicitly in TypeScript with an event.

So for example, something like:

<form class=form-group>
    <td><label>Status Code</label></td>
    <input type="text" #StatusCode (ngModel)="StatusCodes" value="{{StatusCodes}}">
</form>                                         

<form class=form-group>
    <td><label>Eta</label></td>
    <input type="text" #Eta (ngModel)="Etas" value="{{Etas}}">
</form>
<form class=form-group>
    <td><label>Etd</label></td>
    <input type="text" #Etd (ngModel)="Etds" value="{{Etds}}">
</form>
<form class=form-group>
    <td><label>Ata</label></td>
    <input type="text" #Ata (ngModel)="Atas" value="{{Atas}}" (change)="updateStatusCode('ata')">
</form>
<form class=form-group>
    <td><label>Atd</label></td>
    <input type="text" #Atd (ngModel)="Atds" value="{{Atds}}">
</form>

And then:

updateStatusCode(type) {
  switch (type) {
    case 'ata':
      /* set status code */
      this.StatusCodes = 'import';
      break;
    case 'atd':
      /* etc */
      break;
    case 'eta':
      /* etc */
      break;
    case 'etd':
      /* etc */
      break;
  }
}

It's not super-elegant, but it will be the easiest to change and easiest to test (if you're going to write unit tests).

I haven't executed the code above, so please bear in mind that you may have to tweak it a bit.

mikegeyser
  • 327
  • 1
  • 6