Угловой - несколько кнопок радио в реактивных формах - PullRequest
Новая
       31

Угловой - несколько кнопок радио в реактивных формах

0 голосов
/ 09 января 2019

У нас есть список, как показано ниже (в оригинальной реализации productList придет из API) 

productList = [{
    productId: "104",
    productName: "computer"
  },
  {
    productId: "105",
    productName: "Sprots"
  },
  {
    productId: "106",
    productName: "TV"
  }];

нам нужно отобразить название продукта в виде переключателей в html , что-то вроде этого. 

[] Computer
[] Sports
[] TV

и когда мы выбираем одну радиокнопку, она должна давать выбранный элемент в компоненте (например, если мы выберем радиокнопку ТВ, может быть что-то вроде этого? 

this.myForm.controls['productMethods'].valueChanges.subscribe(value => {
      var a  = value 
      // how can i get a = { productId: "106",productName: "TV"} **?**
    }

для предварительно выбранного: - 

[] Computer
[x] Sports <== how to make sports as pre-selected on page load also **?**
[] TV

Я пытался https://stackblitz.com/edit/angular-formarray-example-2-3xq45k, но не отображались переключатели.

Спасибо

Ответы [ 3 ]

0 голосов
/ 09 января 2019

Вот обновленная версия вашего Stackblitz.

Во-первых, поскольку вы используете радиовходы, вы получите только одно значение, а не массив. 

this.productFormGroup = this.formBuilder.group({
  productMethod: new FormControl("105"),
});

Во-вторых, все ваши радиовходы должны иметь одинаковое имя (это имя должно соответствовать formControlName). 

<input type="radio"
  formControlName="productMethod"
  id="radio{{i}}"
  name="productMethod"
  [value]=item>
<label class="custom-control-label"
  for="radio{{i}}">
  {{item.productName || '?'}}
</label>

В-третьих, я бы не использовал объект в качестве значения формы, потому что вы не можете сравнивать объекты (легко), чтобы иметь возможность установить значение по умолчанию. Используйте productId и используйте метод для получения соответствующего продукта. 

getProductById(id): any {
  return this.productList.find(p => p.productId == id);
}

Наконец, я сделал другие небольшие изменения, чтобы сделать ваш код немного лучше. 

<div [formGroup]="productFormGroup">
  <div *ngFor="let item of productList; let i = index;">
    <input type="radio"
      formControlName="productMethod"
      id="radio{{i}}"
      name="productMethod"
      [value]=item.productId>
    <label class="custom-control-label"
      for="radio{{i}}">
      {{item.productName || '?'}}
    </label>
  </div>
</div>
{{ getProductById(productFormGroup.controls.productMethod.value) | json }}
0 голосов
/ 05 апреля 2019

Немного поздно, но позвольте мне оставить это здесь. угловой материал имеет mat-radio-group, в вашем модуле import {MatRadiomodule} from '@angular/material' также импортируйте его внутрь @NgModule.

В вашем component. 

this.formGroupVariable = this.fb.group({
    productItem: ['', Validators.required],
    . . .
});

Тогда в вашем template component, 

<mat-radio-group *ngFor="let productItem of productList">
    <label for="{{productItem.value}}" class="radio-inline">
        <input id="{{productItem.value}}" 
               [value]="productItem.value"
               formControlName="productItem"                                          
               type="radio"
               name="requestType"
               [checked]="productItem.value==='Sports'">
               {{productItem.value}}
    </label>
</mat-radio-group>

Надеюсь, это поможет.

0 голосов
/ 09 января 2019

1. -Вы должны написать "formArrayName"

2.-formControlName заключено в []

3.-радио кнопки ??? Если вы хотите переключатели, это всего лишь formControlName, а не массив 

<div [formGroup]="productFormGroup">
    <!---you need write "formArrayName"--->
    <div formArrayName="productMethods">
        <div *ngFor="let item of productList; let i = index">
            <div>
                <!--formControlName is enclosed by []-->
                <input type="checkbox" name="{{'acceptable'+i}}" [formControlName]="i">
                <label class="custom-control-label" 
                    for="{{ 'acceptable' + i}}">{{item.productName}}
               </label>
           </div>
        </div>
    </div>
</div>

this.myForm.controls['productMethods'].valueChanges.subscribe(value => {
      //value becomes, e.g. [true,false,false]
      values.forEach((v,index)=>{
         if (v)
           console.log(productList[i]);
      })
    }

ПРИМЕЧАНИЕ. Если вы хотите переключатели 

<div [formGroup]="productFormGroup">
    <div *ngFor="let item of productList; let i = index" >
        <input type="radio" name="product" formControlName="product" [value]="item" >
    <label class="custom-control-label" 
        for="{{ 'acceptable' + i}}">{{item.productName}}</label>
    {{item.productname}}
  </div>
</div>

Но твоя форма похожа на 

this.productFormGroup = this.formBuilder.group({
      product:''
    });
...