Я работаю над переключателем углового материала 2, следуя этой документации: https://material.angular.io/components/component/radio.
Проблема, с которой я столкнулась, заключается в том, чтобы переключатель был выбран по умолчанию для параметра No Если вы видите в плункере: https://plnkr.co/edit/jdRxVLdSfFqR4XOdpyUN?p=preview, вы обнаружите, что ни один из параметров не выбран. Я бы хотел, чтобы значение по умолчанию было No когда страница загружается.
Мне кажется, что много плунжеров больше не работают для меня. Здесь есть модифицированный шаблон:
Как уже упоминалось, мы можем либо установить ngModel, либо переменную:
[(ngModel)]="favoriteSeason"
и в файле ts:
favoriteSeason: string = 'Winter';
Или мы можем установить проверенный:
[checked]="season === 'Winter'"
Еще одна небольшая проблема, которую я недавно обнаружил, заключается в том, что если вы ошибочно указали неверный код метки (дубликаты идентификаторов), то это не сработает - вы ничего не можете проверить. Убедитесь, что ваши идентификаторы уникальны.
Вы можете использовать checked, например:
[checked]="data.value ==='false'"
обратите внимание, что мы проверяем использование строки 'false', а не false, так как ваше значение имеет строку со значением false.
есть еще одна опция, которую вы можете использовать [(ngModel)] для инициализации md-radio-group с вашим компонентом.
демо плункер
Вы можете достичь этого с помощью атрибута [checked]. Посмотреть этот Plunker
Мне нравится реактивный подход при работе с музыкальными переключателями. Ниже приведен пример того, как проверить истинность и ложь в вашей базе данных для конкретной формыControlName
Компонент в диалоговом окне
<mat-radio-group formControlName="trueClient">
<mat-radio-button class="material-radio" value="true" [checked]="data.trueClient === 'true'">True Client</mat-radio-button>
<mat-radio-button class="material-radio" value="false" [checked]="data.lostLead === 'false'">Lost Lead</mat-radio-button>
</mat-radio-group>
Если это форма обновления, не забудьте установить значения в построителе форм. Пример:
.ts для компонента в диалоговом окне.
this.viewClient.setValue({
trueClient: this.data.trueClient
});
В этом случае я открываю данные в диалоговом окне. Таким образом, данные поступают из ниже: component.ts before, который открывает диалоговое окно. Просто ссылку, чтобы вы знали, где я получил переменную данных сверху, чтобы установить значения.
Компонент, используемый для открытия диалогового окна. Ссылка на диалог в документах материалов для получения дополнительной информации о том, как настроить.
const dialogRef = this.dialog.open(ClientNotesComponent, {
height: '600px',
width: '800px',
data: {trueClient: trueClient}
});
});
}
<mat-radio-button [checked]="true"</mat-radio-button>
HTML файл
<mat-radio-group aria-label="Select an option" [(ngModel)]="formValues['type']">
<mat-radio-button value="individual">Individual</mat-radio-button>
<mat-radio-button value="business">Business</mat-radio-button>
</mat-radio-group>
Ts файл
ngOnInit()
{
this.formValues['type'] = "business";
}