[英]Angular PrimenG - Checkbox and Submit functionality
I have created a component which would show the respective countries based on the city user selects using PrimeNg
.我创建了一个组件,该组件将根据用户使用
PrimeNg
选择的城市显示各个国家。
If user selects London checkbox & clicks on submit, Request should go to Backend API and fetch the country name and show on UI as: Selected city is in UK.如果用户选择伦敦复选框并单击提交,则请求应 go 到后端 API 并获取国家名称并在 UI 上显示为:所选城市在英国。
Backend JSON Response:后端 JSON 响应:
data: {
"country" : "UK",
"status" : "success"
}
Project files are:项目文件是:
<h5>Select City</h5>
<div class="p-field-checkbox">
<p-checkbox name="group1" value="New York" [(ngModel)]="selectedCities" inputId="ny"></p-checkbox>
<label for="ny">New York</label>
</div>
<div class="p-field-checkbox">
<p-checkbox name="group1" value="San Francisco" [(ngModel)]="selectedCities" inputId="sf"></p-checkbox>
<label for="sf">London</label>
</div>
<p-button label="Submit"></p-button>
import { Component } from '@angular/core';
import {MenuItem} from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
selectedCities: string[] = [];
checked: boolean = false;
ngOnInit() {}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
CheckboxModule,
FormsModule,
ButtonModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
UI Looks as below:用户界面如下所示:
I am unable to figure how to store the selected city and show the corresponding country as I am new to Angular Development.我不知道如何存储所选城市并显示相应的国家,因为我是 Angular Development 的新手。
Any leads or help is highly appreciable.任何线索或帮助都是非常可观的。
app.component.html app.component.html
<h5>Select City</h5>
<ng-container *ngFor="let city of cities; let i = index">
<div class="p-field-radiobutton">
<p-radioButton name="city" [value]="city" [(ngModel)]="selectedCity" id="i" (onClick)="selectedCountry = null">
</p-radioButton>
<label for="i">{{ city }}</label>
</div>
</ng-container>
<br>
<p-button label="Submit" (onClick)="onSubmit()"></p-button>
<br>
<br>
<label *ngIf="selectedCountry">
Selected city is {{ selectedCity}}<br>Selected country is {{selectedCountry}}</label>
app.component.ts app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
selectedCity: string;
selectedCountry: string = null;
checked: boolean = false;
cities: string[] = [
'New York',
'London',
'Delhi',
'Mumbai',
'Chennai',
'Hongkong',
'Dhaka',
];
ngOnInit() {}
onSubmit() {
if (!this.selectedCity) {
alert('Please select a city');
return;
}
this.selectedCountry = this.getCountryName();
}
getCountryName() {
// make your api call here
// I am just mocking
let country;
switch(this.selectedCity) {
case 'New York':
country = 'USA';
break;
case 'London':
country = 'UK';
break;
case 'Delhi':
case 'Mumbai':
case 'Chennai':
country = 'India';
break;
case 'Hongkong':
country = 'China';
break;
case 'Dhaka':
country = 'Bangladesh';
break;
}
return country;
}
}
I've implemented a working demo at Stackblitz with radio buttons.我在Stackblitz上用单选按钮实现了一个工作演示。
As I don't know your backend API.因为我不知道你的后端 API。 So, I've added predefined data for the demo.
因此,我为演示添加了预定义数据。
See if that works for you.看看这是否适合你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.