Question

我有一个反应式表格，其中包含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() {

  }

Answer 1

1。-请勿使用“已选中”。仅当您创建表单时才提供正确的值。正确的值不是“ true”

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

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

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

Answer 2

我解决了我的问题！

首先，我在角度文档中找到了重要信息，可以回答我的第一个问题：

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

然后，如果是反应形式：

“ 以反应形式使用单选按钮时，同一组中的单选按钮应具有相同的formControlName。您还可以添加name属性，但这是可选的。”

因此，我在每个单选按钮处都赋予了相同的formControlName，现在提到的“已选中”即可生效。

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

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

希望它可以帮助您！

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

3 个答案: