如何使用单选按钮在我的 ionic 3 angular 应用程序中选择性别？

Question

我是 Angular 和 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>

这里我已经指定了我如何在数组中获取性别的键值

员工详细信息.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);
    }
}

请帮帮我。提前一百万谢谢。

Answer 1

对于您的 <ion-select> 代码，它应该如下所示：

<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)]="gender" class="textcolor" value="gender">
          <ion-option *ngFor="let item of genderlist" value="{{item.key}}">{{item.value}}</ion-option>
        </ion-select>
    </ion-item>

至于 div 和 span 语句底部的表单控件，您可能需要使用更多 employee-details.ts 代码更新您的问题。我注释掉了这两个语句，并且选择工作得很好。