Я новичок в угловой и ionic 3.Теперь только я учусь этому.
В настоящее время я использую угловые формы для получения сведений о сотруднике и сохранения их в таблице базы данных.
Содержит следующие поля firstname, lastname, gender, DOB, Departmnet и т. Д.
Для пола в настоящее время я использую modal drop-down box, который содержит два значения (мужской и женский) и выбираю его.
Мне нужно использовать радиокнопку для выбора вместо модального раскрывающегося списка.
Как это реализовать??
Пожалуйста, ведите меня.Я только немного знаю в HTML и CSS тоже.Пожалуйста, в настоящее время нужна ваша помощь, ребята.Пример ссылки или учебник высоко ценится.Я уже пытался реализовать переключатели, используя <ion-list>, но это приводит к проблемам с выравниванием.
Я упомянул здесь все, что я пробовал до сих пор.
employee-details.html:
<ion-item no-lines>
<ion-icon class="iconstyle" name="md-contacts" item-start></ion-icon>
<ion-label floating color="primary">Gender</ion-label>
<ion-select class="mydate" formControlName="gender" [(ngModel)]="vm.gender" class="textcolor" value="gender">
<ion-option *ngFor="let item of genderlist" value="{{item.key}}">{{item.value}}</ion-option>
</ion-select>
</ion-item>
<div class="error-message-emp" *ngIf="formemp.controls.gender.errors && (formemp.controls.gender.dirty || formemp.controls.gender.touched)">
<span *ngIf="formemp.controls.gender.errors?.required">Gender is required</span>
</div>
Здесь я указал, как я взял ключевые значения для пола в массиве
employee-details.ts:
import { Component } from '@angular/core';
import {IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import {EmployeeService} from '../../services/employee.service';
import {compareValidator} from '../../shared/directives/comparevalidator';
import { MessageService } from '../../services/message.service';
import { Keyboard } from '@ionic-native/keyboard';
import { BroadCastService } from '../../services/broadcast.service';
import { isNullOrUndefined } from 'util';
import { Employee } from '../../models/employee';
import { FormGroup, FormControl, Validators, AbstractControl} from '@angular/forms';
/**
* Generated class for the EmployeeDetailsPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-employee-details',
templateUrl: 'employee-details.html',
providers :[EmployeeService]
})
export class EmployeeDetailsPage {
formemp: FormGroup;
value: any;
setdeptlist = [];
emailpattern: string = "[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[a-z]{2,3}$";
vm: Employee;
constructor(public navCtrl: NavController, public navParams: NavParams, private employeeservice: EmployeeService, private message: MessageService,private platform: Platform, public keyboard: Keyboard, public broadCastService: BroadCastService,)
{
employeeservice.getdepartment().subscribe(res =>{
console.log(res);
if(!isNullOrUndefined(res)) {
this.setdeptlist = res;
}
})
this.vm = new Employee();
}
ngOnInit() {
this.initializeValidators();
}
initializeValidators(){
this.formemp = new FormGroup({
firstname : new FormControl ('', [Validators.required]),
lastname : new FormControl ('', [Validators.required]),
dob: new FormControl('', Validators.required),
email: new FormControl('', {
validators: [Validators.required, Validators.pattern(this.emailpattern)]
}),
gender: new FormControl('', Validators.required),
dept: new FormControl('', Validators.required),
others: new FormControl(null)
})
}
resetForm(formGroup: FormGroup) {
let control: AbstractControl = null;
formGroup.reset();
formGroup.markAsUntouched();
Object.keys(formGroup.controls).forEach((name) => {
control = formGroup.controls[name];
control.setErrors(null);
});
this.initializeValidators();
}
submit(){
if(this.formemp.valid){
this.employeeservice.saveemployee(this.vm).subscribe(res=>{
console.log(res);
this.message.alert("Details has been added Successfully");
this.resetForm(this.formemp);
}, err => {
this.message.alert(JSON.stringify(err.error));
} )
}
else {
this.validateFormControl(this.formemp);
}
}
departmentChange(event){
debugger;
var check = event;
var che =this.vm.dept;
const others = this.formemp.get('others');
if(this.vm.dept == "6" ){
others.setValidators(Validators.required);
}
else{
others.clearValidators();
}
others.updateValueAndValidity();
}
ionViewDidLoad() {
console.log('ionViewDidLoad EmployeeDetailsPage');
}
moveFocus(event, nextElement, isLastControl) {
if (event.key === 'Enter') {
if (isLastControl && isLastControl === false)
nextElement.setFocus();
else if (isLastControl && isLastControl === true)
this.submit();
}
}
validateFormControl(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.markAsTouched({ onlySelf: true });
} else if (control instanceof FormGroup) {
this.validateFormControl(control);
}
});
}
genderlist = [
{ key: 1, value: "Male" },
{ key: 2, value: "Female" }
];
}
Здесь я упомянул свой класс обслуживания для получения значения пола от API
employee-service.ts:
import { Injectable } from "@angular/core";
import { DataService } from "./data.service";
@Injectable()
export class EmployeeService {
constructor(private dataservice: DataService) {
}
getgender(){
return this.dataservice.getData('/api/lookup/getgender',true);
}
}
Пожалуйста, помогитея, ребята.Миллион заранее.