Javascript 角度4：检查是否以反应形式选择了单选按钮

我有一个被动形式，有4个输入类型的收音机和4个输入类型的文本。 我想在单选按钮后动态显示输入文本 挑选出来的。例如，如果选择了单选按钮1，我想显示 其对应的输入文本为1

我遇到两个问题：

• 默认情况下，不会选择第一个单选按钮（即使选中了属性），并且可以同时选择所有单选按钮
• 所有的输入文本都显示出来了，我不知道如何使用*ngIf 检查是否选择了与输入对应的单选按钮

component.html：

<section class="CreateItem" *ngIf="formGroupItemSelection"> 
<form (ngSubmit)="addItem()" [formGroup]="formGroupItemSelection">
  <input formControlName="refNumber" type="radio" value="refNumber" checked> ref number
  <br>

  <input formControlName="partNumber" type="radio" value="partNumber"> part number
  <br>

  <input formControlName="itemName" type="radio" value="itemName"> item name
  <br>

  <input formControlName="manufacturerName" type="radio" value="manufacturerName">manufacturer name
  <br>

  <div *ngIf="formGroupItemSelection.controls.refNumber.valid">
    <input list="refNumbers" formControlName="refNumberSelected" type="text" name="refNumberSelected">
    <datalist id="refNumbers">
      <option *ngFor="let ref of listOfItems">{{ref.refNumber.input}}</option>
    </datalist>
  </div>

  <div *ngIf="formGroupItemSelection.controls.partNumber.valid">
    <input list="partNumbers" formControlName="partNumberSelected" type="text" name="partNumberSelected">
    <datalist id="partNumbers">
      <option *ngFor="let ref of listOfItems">{{ref.partNumber.input}}</option>
    </datalist>
  </div>

  <div *ngIf="formGroupItemSelection.controls.itemName.valid">
    <input list="itemsName" formControlName="itemNameSelected" type="text" name="itemNameSelected">
    <datalist id="itemsName">
      <option *ngFor="let ref of listOfItems">{{ref.itemDesignation.input}}</option>
    </datalist>
  </div>

  <div *ngIf="formGroupItemSelection.controls.manufacturerName.valid">
    <input list="manufacturersName" formControlName="manufacturerNameSelected" type="text" name="manufacturerNameSelected">
    <datalist id="manufacturersName">
      <option *ngFor="let ref of listOfItems">{{ref.manufacturerName.input}}</option>
    </datalist>
  </div>

  <button type="submit [disabled]="!formGroupItemSelection.valid">Valider</button>


</form>
</section>

1.-不使用“已检查”。创建表单时，请给出正确的值。并且正确的值不是“true”

2.-当我们将*ngIf转换为反应形式时，使用myform.get（'mycontrol'），例如

。。。

我解决了我的问题

首先，我在angular doc中找到了重要信息来回答我的第一个问题：

“若要在模板驱动表单中使用单选按钮，您需要确保同一组中的单选按钮具有相同的名称属性。具有不同名称属性的单选按钮不会相互影响。”

然后，在反应形式的情况下：

在被动窗体中使用单选按钮时，同一组中的单选按钮应具有相同的formControlName。您也可以添加name属性，但这是可选的

所以，我在每个单选按钮上都给出了相同的formControlName，现在提到“checked”就行了

否则，为了回答我的第二个问题，我在输入的“value”属性后面标识了每个单选按钮，并检查是否选中了单选按钮：

<div *ngIf="formGroupItemSelection.controls.radioBoutton.value==='refNumber'">

---

希望能有帮助

“La propriété‘controls’n‘existe pas sur le type‘AbstractControl’”。您是否为单选按钮创建了formControl？是的，我更新了它，它是相同的。但通常情况下，由于FormBuilder，我不需要实例化FormControl。如果添加，可以设置初始值而不是设置manuallyOk，但不幸的是，我得到了相同的结果。

initializeForm() {
    this.formGroupItemSelection = this.fb.group({
      refNumber : new FormControl(true),
      partNumber: new FormControl(false),
      itemName: new FormControl(false),
      manufacturerName: '',
      refNumberSelected:[
        null,
        Validators.compose([Validators.required, matchValuesRefNumber(this.listOfItems)])
      ],
      partNumberSelected:[
        null,
        Validators.compose([Validators.required, matchValuesPartNumber(this.listOfItems)])
      ],
      itemNameSelected: [
        null,
        Validators.compose([Validators.required, matchValuesItemName(this.listOfItems)])
      ],
      manufacturerNameSelected:[
        null,
        Validators.compose([Validators.required, matchValuesManufacturerName(this.listOfItems)])
      ]
    })

//This will set the radio button checked no need to add checked attribute you can set cheked dynamically
 this.formGroupItemSelection.get('refNumber ').setValue(true);
this.formGroupItemSelection.get('partNumber').setValue(true);
this.formGroupItemSelection.get('itemName').setValue(true)
  } 

this.formGroupItemSelection = this.fb.group({
      refNumber : ['refNumber'], //NOT is true or false 
      partNumber: [],
      itemName: []
      ....
})

<div *ngIf="formGroupItemSelection.get('partNumber').valid">...</div>

<div *ngIf="formGroupItemSelection.controls.radioBoutton.value==='refNumber'">