我想仅使用一个输入字段在 angular 6 个表单中创建一个单选按钮

Question

我想在 angular 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 select 使用文本或单选按钮。例如在你的 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'];

我想仅使用一个输入字段在 angular 6 个表单中创建一个单选按钮

I want to create a radio button in angular 6 forms using only one input field

forms

radio-group

radio-button

angular

angular6