Question

我正在开展第一个有角度的项目。我创建了一个表单，用户可以从下拉列表中进行选择。我在每个下拉列表中添加了一个选项以选择＆＃34;其他＆＃34;并键入文本框。

这会创建一种情况，用户可以从下拉列表中选择值并同时使用文本框。我在提交按钮上有一个函数，我需要存储用户传递的值。

我遇到的问题是，如果用户从下拉列表中选择，则该值是ID值，但文本框会返回一个名称。此外，我不确定如何处理这些值，因为我的后端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（...）函数中访问该国家/地区字符串。

从下拉列表和文本框中获取值

1 个答案: