javascript - angular 4 - 반응 형에서 라디오 버튼이 선택되었는지 확인

4 개의 입력 유형 라디오와 4 개의 입력 유형 텍스트가있는 반응 형 양식이 있습니다. 라디오 버튼 뒤에 동적으로 입력 텍스트를 표시하고 싶습니다 선택된. 예를 들어, 버튼 라디오 1을 선택한 경우 해당 입력 텍스트 1.

2 가지 문제가 발생했습니다 :

• 첫 번째 라디오 버튼은 기본적으로 선택되어 있지 않으며 (속성이 선택된 경우에도) 모든 라디오 버튼을 동시에 선택할 수 있습니다.
• 모든 입력 텍스트가 표시됩니다. * ng를 모르는 경우 입력에 해당하는 라디오 버튼이 선택되어 있는지 확인하십시오.

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>

component.ts :

import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, FormBuilder, Validators} from '@angular/forms'
import { ManagementArbologistiqueService } from '../../management-arbologistique.service';
import { ActivatedRoute, Params } from '@angular/router';
import { matchValuesRefNumber, matchValuesPartNumber, matchValuesItemName, matchValuesManufacturerName } from '../Validators/validators';
@Component({
  selector: 'app-item-selection',
  templateUrl: './item-selection.component.html',
  styleUrls: ['./item-selection.component.css']
})
export class ItemSelectionComponent implements OnInit {
  formGroupItemSelection:FormGroup;
  listOfItems = [];
  constructor(public fb:FormBuilder,private managementArbo: ManagementArbologistiqueService, private route: ActivatedRoute) { }
  ngOnInit() {
    this.getListBdd();
  }
  initializeForm() {
    this.formGroupItemSelection = this.fb.group({
      refNumber : '',
      partNumber: '',
      itemName: '',
      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)])
      ]
    })
  }
  getListBdd() {
    this.route.params.subscribe((params: Params) => {
      let subroute = "getRefNumber";
      this.managementArbo.getProducts(subroute)
        .subscribe(
          res => { 
            this.listOfItems = res; console.log('bdd:' + res);
            this.initializeForm();
         },
          err => console.log(err),
          () => console.log('getProducts done'));
    });
  }
  addItem() {
  }