угловой материал мат-радио-кнопка по умолчанию не работает после добавления имени в мат-радио-группе - PullRequest
Новая
       13

угловой материал мат-радио-кнопка по умолчанию не работает после добавления имени в мат-радио-группе

0 голосов
/ 01 мая 2018

В приложении Angular 5 с угловым материалом 5.2.5 при использовании этого кода переключатель по умолчанию включен, но в консоли есть ошибка

Код: 

<mat-radio-group [(ngModel)]="collection">
  <mat-radio-button class="collectionRadioButton" 
   *ngFor="let coll of collections" 
   [value]="coll.endPoint" 
   [checked]="coll.isDefault" 
   (change)="clearResults()">
  {{coll.label}}
  </mat-radio-button>
</mat-radio-group>

Ошибка в консоли Chrome: 

ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

Example 1: <input [(ngModel)]="person.firstName" name="first">   
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
at Function.TemplateDrivenErrors.missingNameException (forms.js:5891)
at NgModel._checkName (forms.js:6244)
at NgModel._checkForErrors (forms.js:6217)
at NgModel.ngOnChanges (forms.js:6099)
at checkAndUpdateDirectiveInline (core.js:12407)
at checkAndUpdateNodeInline (core.js:13935)
at checkAndUpdateNode (core.js:13878)
at debugCheckAndUpdateNode (core.js:14771)
at debugCheckDirectivesFn (core.js:14712)

Но при добавлении имени в mat-radio-group 

<mat-radio-group [(ngModel)]="collection" [name]="'aList'">

тогда список переключателей все еще корректно генерируется, но проверенный по умолчанию больше не работает ...

Ответы [ 3 ]

0 голосов
/ 21 мая 2018

Вам понадобится name = "your_name" рядом с [(ngModel)], тогда проверенное свойство не будет работать, но вы можете сделать это следующим образом. 

<form>  
 <mat-radio-group [(ngModel)]="radioOptions" name="radioButtons">
    <mat-radio-button [value]="'TEST1'">TEST1</mat-radio-button>
    <mat-radio-button [value]="'TEST2'">TEST2</mat-radio-button>
</mat-radio-group> </form>

  import { FormsModule } from '@angular/forms';
  export class ConfigurazioneComponent implements OnInit {
     radioOptions: string = 'TEST1'; 
  }
0 голосов
/ 28 февраля 2019

Для работы без имени и только с объектом, коллекция должна быть экземпляром коллекций для работ и добавить атрибут [ngModelOptions] = "{standalone: ​​true}".

Пример в вашем коде: Компонент: 

  this.collection = this.collections.find(x => x.isDefault)

Шаблон: 

<mat-radio-group [(ngModel)]="collection">
    <mat-radio-button class="collectionRadioButton" 
                      *ngFor="let coll of collections" 
                      [value]="coll" 
                      (change)="clearResults()"
                      [ngModelOptions]="{standalone: true}" >
       {{coll.label}}
    </mat-radio-button>
  </mat-radio-group>
0 голосов
/ 01 мая 2018

Если я не ошибаюсь, вы не можете использовать [name]="''", но name=""

name="{{aList}}" // this should work just fine if that aList was variable else
name="aList" // if its a string
...