Значок по умолчанию для выбора значения угловой материал 2

Я работаю над переключателем углового материала 2, следуя этой документации: https://material.angular.io/components/component/radio.

Проблема, с которой я столкнулась, заключается в том, чтобы переключатель был выбран по умолчанию для параметра No Если вы видите в плункере: https://plnkr.co/edit/jdRxVLdSfFqR4XOdpyUN?p=preview, вы обнаружите, что ни один из параметров не выбран. Я бы хотел, чтобы значение по умолчанию было No когда страница загружается.

Ответы

Ответ 1

Мне кажется, что много плунжеров больше не работают для меня. Здесь есть модифицированный шаблон:

блицкриг

Как уже упоминалось, мы можем либо установить ngModel, либо переменную:

[(ngModel)]="favoriteSeason"

и в файле ts:

  favoriteSeason: string = 'Winter';

Или мы можем установить проверенный:

[checked]="season === 'Winter'"

Еще одна небольшая проблема, которую я недавно обнаружил, заключается в том, что если вы ошибочно указали неверный код метки (дубликаты идентификаторов), то это не сработает - вы ничего не можете проверить. Убедитесь, что ваши идентификаторы уникальны.

Ответ 2

Вы можете использовать checked, например:

[checked]="data.value ==='false'"

обратите внимание, что мы проверяем использование строки 'false', а не false, так как ваше значение имеет строку со значением false.

Plunker

Ответ 3

есть еще одна опция, которую вы можете использовать [(ngModel)] для инициализации md-radio-group с вашим компонентом.

демо плункер

Ответ 4

Вы можете достичь этого с помощью атрибута [checked]. Посмотреть этот Plunker

Ответ 5

Мне нравится реактивный подход при работе с музыкальными переключателями. Ниже приведен пример того, как проверить истинность и ложь в вашей базе данных для конкретной формы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}
    });
 });
}

Ответ 6

<mat-radio-button [checked]="true"</mat-radio-button>

Ответ 7

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";
}