Получение значений из выпадающих и текстовых полей

Question

Я работаю над своим первым угловым проектом. Я создал форму, где пользователь может выбрать из выпадающего списка. Я добавил опцию в каждом раскрывающемся списке, чтобы выбрать «другое» и ввести текстовое поле.

Это создает ситуацию, когда пользователь может выбрать значения из раскрывающегося списка и одновременно использовать текстовое поле. У меня есть кнопка «Отправить», в которой мне нужно сохранить значения, которые передает пользователь.

Проблема, с которой я столкнулся, заключается в том, что если пользователь выбрал из выпадающего списка, значение является значением идентификатора, но текстовое поле возвращает имя. Кроме того, я не уверен, как обрабатывать значения, потому что мой внутренний API ожидает четыре текстовых значения. Если у пользователя есть две выпадающие записи и две записи в текстовом поле, каков хороший способ получить правильные значения для API?

Я думал о передаче каждого возможного значения в функцию, но я не уверен, какую логику я мог бы добавить, чтобы получить только 4 значения, которые мне нужны.

     <div class="form-group">
      <label class="control-label" for="Country">Category:</label><!--<input type="text" #category (change)="CountryTextAreaFilled(category.value)">-->
      <select *ngIf="getCountryss()" [(ngModel)]="selectedCountry" (change)="onSelectCountry($event.target.value)" class="form-control input-lg" id="Country">
            <option value="0">Select Country</option>
            <option *ngFor="let Country of getCountryss()" value= {{Country.id}}>{{Country.name}}</option>
            <option value="others">Other- Please Specify Below</option>
      </select>
</div>

<div class="form-group" *ngIf="selectedCountry == 'others'">
            <label for="name">Enter Category:</label>
            <input type="text" #category class="form-control" [(ngModel)] = "userCategory" (change)="CountryTextAreaFilled(userCategory)">
</div>

<div class="form-group">
      <label class="control-label" for="ProviderType">Type:</label>
      <select *ngIf="type" [(ngModel)]="selectedType" (change)="onSelectProviderType($event.target.value)" class="form-control input-lg" id="type">
          <option value="0">Select Type</option>
        <option *ngFor="let type of type" value= {{type.id}}>{{type.name}}</option>
        <option value="others">Other- Please Specify Below</option>
      </select>
</div>

<div class="form-group" *ngIf="selectedType == 'others'">
            <label for="name">Enter Type:</label>
            <input type="text" #type class="form-control" [(ngModel)] = "userType" [disabled]="providerInputStatus" (change)="CountryTextAreaFilled(userType)">
</div>

<div class="form-group">
      <label class="control-label" for="State">State:</label>
            <select *ngIf="type" [(ngModel)]="selectedState" (change)="onSelectState($event.target.value)" class="form-control input-lg" id="State">
            <option value="0">Select Classifcation</option>
            <option *ngFor="let State of State" value= {{State.id}}>{{State.name}}</option>
            <option value="others">Other- Please Specify Below</option>
      </select>
</div>

<div class="form-group" *ngIf="selectedState == 'others'">
            <label for="name">Enter State:</label>
            <input type="text" #State class="form-control" [(ngModel)] = "userState" [disabled]="categoryInputStatus" (change)="CountryTextAreaFilled(userState)">
</div>

<div class="form-group">
            <label class="control-label" for="Location">Location:</label>
                  <select [(ngModel)]="selectedLocation" class="form-control input-lg" id="Location">
                  <option value="0">Select Location</option>
                  <option *ngFor="let Location of Location" value= {{Location.id}}>{{Location.name}}</option>
                  <option value="others">Other- Please Specify Below</option>
            </select>
</div>

<div class="form-group" *ngIf="selectedLocation == 'others'">
            <label for="name">Enter Location:</label>
            <input type="text" #Location class="form-control" [(ngModel)] = "userLocation" [disabled]="specializationInputStatus" (change)="CountryTextAreaFilled(userState)">
</div>


      <button type="submit" class="btn btn-success" (click)="saveCountry(userCategory, userType, userState, userLocation, selectedCountry, selectedType, selectedState, selectedLocation)">Submit</button>

      <br>
      <h3 *ngIf = "isAdded" >{{confirmationString}}</h3>


<a routerLink = "/angular"> < back</a>

Answer 1

Ваш вопрос немного двусмысленный, но я постараюсь вам помочь.

Если ваш сервер ожидает строковые / текстовые значения, вам нужно обработать его во внешнем интерфейсе и отправить то, что он ожидает. Поэтому вам нужно установить логику для преобразования в числовую строку функции:

 saveCountry(userCategory, userType, userState, userLocation, selectedCountry, selectedType, selectedState, selectedLocation) {

    if(selectedCountry!=='others') {
      selectedCountry = selectedCountry.toString(); 
    } else {
    selectedCountry = userState; 
}

и т. Д. Для остальных значений.

Чтобы получить строковое значение, необходимо установить его в значение элемента option, а затем это значение будет присвоено модели selectedCountry при выборе его из раскрывающегося списка:

<select *ngIf="getCountryss()" [(ngModel)]="selectedCountry" (change)="onSelectCountry($event.target.value)" class="form-control input-lg" id="Country">
            <option value="0">Select Country</option>
            <option *ngFor="let Country of getCountryss()" value="{{Country.name}}">{{Country.name}}</option>
            <option value="others">Other- Please Specify Below</option>
      </select>

Теперь у вас будет доступ к этой строке страны в вашей функции saveCountry (...).