我想只使用一个输入字段以 6 角形式创建一个单选按钮

Question

我想只使用一个输入字段以 6 角形式创建一个单选按钮 - 这里我的问题是我的输入字段在一个从数组中提取值的 ngFor 循环内。现在我想为性别创建一个单选按钮，所以有什么建议或参考我该怎么做？ 这是我的代码 -

<form [formGroup]="myGroup" (submit)="submit(myGroup.value)">
    <div class="row">
      <div class="col-sm-4" *ngFor="let info of myGroup.controls['myInfo'].controls; let i = index">

            <label for="{{labelValue[i].name}}"> {{labelValue[i].label}}
            <input type="{{labelValue[i].type}}" value="{{labelValue[i].value}}" class="{{labelValue[i].class}}" [formControl]="info">
          </label>

      </div>
    </div>

<div class="row">
  <button class="form-control btn-sub" type=”submit”>
    Submit Details
  </button>
</div>
</form>

这是我在 component.ts 文件中的数组，它从中获取值 -

public labelValue: InputType[] = [
  {name:"fname",type:"text",label:"First Name", class:"form-control",value:"Sheili"},
  //{name:"lname",type:"text",label:"Last Name", class:"form-control"},
  {name:"ctype",type:"text",label:"Customer Type", class:"form-control",value:"INDIVIDUAL"},
  {name:"dob",type:"date",label:"Date Of Birth", class:"form-control",value:"1985-11-17"},
  {name:"gender",type:"text",label:"Gender",class:"form-control",value:"Female"},
  {name:"email",type:"email", label:"E-mail", class:"form-control",value:"Sheili@gmail.com"},
];

Answer 1

这里有 2 种类型的表单字段，输入和单选按钮，您可以在模板和 *ngif 中选择使用哪一种，文本或单选按钮。 例如在你的 for 循环中：

        <div *ngIf="type === 'text'" formGroupName="userData">
          <div class="form-group">
             <label for="email">Email</label>
             <input type="email" class="form-control" 
             id="email" formControlName = "email">
          </div>
        </div>
        <div  *ngIf="type === 'radio'" class="radio" *ngFor="let gender of genders">
          <label>
            <input type="radio" [value]="gender"
            formControlName = "gender">{{gender}}
          </label>
       </div>

ts 代码：

 genders=['male','female'];