>

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() {
  }

  • 답변 # 1

    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)
      }
    
    

  • 답변 # 2

    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>
    
    

  • 답변 # 3

    내 문제를 해결했다!

    먼저, 나는 첫 번째 질문에 답하기 위해 각도 문서에서 중요한 정보를 찾았습니다 :

    "템플릿 기반 양식에서 단일 선택 단추를 사용하려면 동일한 그룹의 단일 선택 단추의 이름 속성이 동일해야합니다. 이름 특성이 다른 단일 선택 단추는 서로 영향을 미치지 않습니다."

    그런 다음 반응 형의 경우 :

    "반응 형에서 라디오 버튼을 사용할 때 같은 그룹의 라디오 버튼은 동일한 formControlName을 가져야합니다. 이름 속성도 추가 할 수 있지만 선택 사항입니다."

    따라서 각 라디오 버튼에 동일한 formControlName을 지정했으며 "확인 된"설명이 작동합니다.

    그렇지 않으면 두 번째 질문에 답하기 위해 입력의 "value"속성을 따르는 각 라디오 버튼을 식별하고 라디오 버튼이 선택되었는지 확인했습니다.

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

    도움이 되길 바랍니다!

관련 자료

  • 이전 oracle - 4 개의 테이블을 조인하여 SQL 테이블 업데이트
  • 다음 C에서 자신의 유형 제한을 설정 하시겠습니까?