我正在开展第一个有角度的项目。我创建了一个表单,用户可以从下拉列表中进行选择。我在每个下拉列表中添加了一个选项以选择"其他"并键入文本框。
这会创建一种情况,用户可以从下拉列表中选择值并同时使用文本框。我在提交按钮上有一个函数,我需要存储用户传递的值。
我遇到的问题是,如果用户从下拉列表中选择,则该值是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>
答案 0 :(得分:2)
你的问题有点模棱两可,但我会尽力帮助你。
如果您的服务器需要字符串/文本值,那么您需要在前端处理它并发送它所期望的内容。所以你必须设置逻辑来转换为数字函数的字符串:
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(...)函数中访问该国家/地区字符串。