如何在angular material 6中隐藏单选按钮
在Angular Material 6中隐藏单选按钮可以通过CSS样式来实现。以下是实现的步骤：
- 首先，在你的Angular项目中安装Angular Material 6。你可以使用以下命令：
npm install @angular/material@6.4.7- 在你的Angular组件中导入所需的Angular Material组件。在本例中，我们需要导入MatRadioModule和MatRadioGroupModule。你可以在组件的.ts文件中添加以下代码：
import { MatRadioModule } from '@angular/material/radio';
import { MatRadioGroupModule } from '@angular/material/radio';- 在你的组件模板中，使用MatRadioGroup和MatRadioButton来创建单选按钮组。在需要隐藏单选按钮的地方，为MatRadioButton添加一个CSS类名。例如：
<mat-radio-group>
<mat-radio-button value="option1">Option 1</mat-radio-button>
<mat-radio-button value="option2" class="hidden-radio">Option 2</mat-radio-button>
<mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>- 在你的组件的CSS文件中，定义.hidden-radio类，并设置display属性为none。这将隐藏带有此类名的单选按钮。例如：
.hidden-radio {
display: none;
}通过以上步骤，你就可以在Angular Material 6中隐藏单选按钮了。
相关·内容
1回答
角9中未识别单选按钮
、、、
我已经从版本8更新到了9版。我注意到在app.module.ts中，以下内容已经从
import { MatRadioModule } from '@angular/material';
至
import { MatRadioModule } from '@angular/material/radio';
现在，我在ng构建上得到了以下错误。
如果‘mat-单选按钮’是一个角组件，那么验证它是这个模块的一部分。如果‘mat-单选按钮’是一个Web组件，那么将'CUSTOM_ELEMENTS_SCHEMA‘添加到该组件的@NgModule.schemas
浏览 2提问于2020-05-04得票数 0
我想使用angularjs和angular-material内置指令来验证表单，包括字段下面的消息，如，输入，选择，单选按钮。有一些具体的要求：
表单域应该具有相同的高度单选按钮，即md-radio应该是内联的，字段下面的消息的位置应该是相似的，角度材料选择，即md-select应该是宽度= 100%
浏览 0提问于2015-07-09得票数 2
我使用的是material.angular.io。我想知道是否有办法将单选按钮设置为数字类型而不是字符串类型。 我使用的是https://material.angular.io/components/radio/overview吗？
浏览 17提问于2019-04-08得票数 1
我是否可以创建相同的功能按钮(章节： (ui.bootstrap.buttons) )
使用角度材料？
Angular-material有单选按钮指令，但我不能使用它，因为我不想让“点”出现在标签的左侧。
Angular-material也有select指令，但它的功能不同。
我还有别的选择吗？
浏览 0提问于2015-04-18得票数 5
回答已采纳
9回答
我正在使用angular material 2单选按钮，遵循以下文档：。
我面临的问题是让单选按钮的缺省选定值为No。如果您在plunker:中看到，您将发现没有选择任何选项。当页面加载时，我希望缺省值为No。
浏览 2提问于2017-05-09得票数 14
1回答
我有一个项目，我选择一个投票(问题)，在下一页，我将为这些问题提供选项/选择与提交按钮，然后显示结果。我的目标是物化或使用角的材料设计准则。我已经设法主题的问题页和结果页。我被困在选择页面上了。我到处都找遍了，我就是搞不懂是什么问题。我可以得到材料单选按钮显示使用，甚至选择文本旁边。我还设置了一个错误消息，如果您在没有选择选项的情况下点击submit，您会看到一条消息显示：“先选择一个选项”。在选择页面上的md-单选按钮后，当我点击submit时，我会一直收到错误消息。我甚至设置了它，所以我有一个常规的单选按钮形式的HTML5和一个md-单选按钮旁边。使用常规单选按钮继续进行下一页的选择提交。
浏览 2提问于2015-07-22得票数 0
1回答
我正在尝试更改单选按钮和墨迹波纹的颜色。覆盖单独的CSS选择器是痛苦的，而且容易出错。我甚至不想在我的应用程序的单选按钮中添加"md-primary“或"md-accent”类。我想覆盖默认主题。我搜索了文档，搜索了谷歌，所以，Angular Material GitHub和演示页面，但找不到简单问题的答案：
单选按钮使用默认主题的哪个调色板？
浏览 1提问于2017-06-22得票数 1
3回答
Material angular布局单选框如下所示：
o Apple
o Banana
我想要颠倒过来
Apple o
Banana o
md单选按钮具有两个组件，
div容器“md-class=”，
和
div标签“md-class=”。
容器持有按钮，而标签持有标签。
我似乎不能调换这些div的位置。当我尝试将md-container向右浮动时，它会超出md-单选按钮的范围。
我如何交换这两个位置，使用子组件上的浮动而不中断父单选按钮，或者其他方式？
谢谢
浏览 2提问于2015-04-01得票数 2
3回答
如何换行的角度材料单选按钮的文字？ 请参阅repo https://stackblitz.com/edit/angular-material-radio-button-wrap-text 尝试过但没有成功(根据https://github.com/angular/material2/issues/10954的说法)： white-space: normal; 起作用的是使用<span></span>技术。但是为什么这能工作而不是white-space: normal呢？
浏览 11提问于2019-03-05得票数 3
回答已采纳
1回答
我有一个表中的字段，它将根据其他字段的值进行验证。为此，我创建了一个验证指令。
更具体地说，我有一个由两个单选按钮和一个文本字段组成的组，该字段将根据所选的单选按钮进行验证。
如果选择第一个单选按钮，如果选择第二个单选按钮，则文本字段值可以是0-100，文本字段值可以是0-无穷大。
我将所选单选按钮的值传递给指令，并根据该条件对文本字段的值进行检查。
到目前一切尚好。除了一些边缘情况外，其他情况都很好。
例如，如果最初选择了第二个单选按钮，那么如果您在文本字段中写入400，然后选择第一个单选按钮。它不会显示无效字段。
directive('discountValidator',
浏览 2提问于2016-05-25得票数 1
回答已采纳
我想在我的angular web应用程序上以反应式表单隐藏一个默认选中的单选按钮，这样客户就看不到它了，但我可以将该值传递给http调用的请求。
浏览 26提问于2019-03-12得票数 0
回答已采纳
1回答
如何在Angular Material2中更改单选按钮的默认颜色？我读了一些关于这个主题的问题，但没有一个能解决这个问题。如何为具有md-radio-button类的元素设置绿色、黄色和红色
浏览 2提问于2017-07-28得票数 2
回答已采纳
1回答
我正在尝试打开菜单菜单在按钮上打开单击.I能够显示菜单选项.But我面临一个问题我的按钮是隐藏的当菜单选项是display.menu应该显示在按钮下面我需要在用户单击按钮时显示按钮和菜单我需要菜单应该显示在按钮下面
以下是我的代码
var app = angular.module("ionicApp", ['ionic']);
app.directive('custommenu', function () {
return {
restrict: 'A',
scope: {
浏览 0提问于2015-05-15得票数 0
我有一个单选按钮和一个相应的输入文本框，当选中单选按钮时会显示该文本框。我保留了input标记所需的验证属性，如下所示：
<input type="text" id="textbox" required />
当我取消选中该单选按钮时，此文本框将隐藏。但是，即使文本框处于隐藏状态，我也无法提交表单。毕竟，隐藏的必填字段仍然是必需的，因此我不能只将required属性放在这些隐藏字段上。
在解释了我的场景之后：
Q1。有没有什么"HTML- only“方法可以只在textbox处于活动状态时才允许验证？
Q2。如果不是，那么使用Angular
浏览 5提问于2016-09-01得票数 2
回答已采纳
1回答
我正在尝试添加一些单选按钮到我的角度表单。我访问了material.angular.io站点并使用了他们的代码。但是，单选按钮看起来不正确。有一个外圈和内圈紧挨着。所以，我去了这里，找到了别人的代码，然后复制/粘贴，得到了同样的问题。以下是代码
<mat-radio-group formControlName="options">
<mat-radio-button value="1">Option 01</mat-radio-button>
浏览 2提问于2018-12-06得票数 1
我有单选按钮和‘删除’文本与ng重复，这里基于单选按钮选中我需要显示删除文本，每当我点击单选按钮‘删除’文本应显示，再次当我点击下一个单选按钮‘删除’应隐藏为上一个未选中的单选按钮，并应显示为下一个选中的单选按钮。对我来说，它的工作，但点击下一个单选按钮，以前的‘删除’文本不是hiding.Code是给予below.Can任何人帮助我，我是新手。
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.div_ = [];
浏览 3提问于2018-06-21得票数 0
我正在运行一个来自的单选按钮示例，除了附录之外，我已经确保跟踪所有的，因为我没有这样的文件(我的应用程序是创建cli的)。
在包含html模板之后，我的应用程序不会呈现，在控制台中，我有一个错误：
不能绑定到“value”，因为它不是“md-单选按钮”的已知属性。
我的ts文件：
import { Component, OnInit } from '@angular/core';
import { SlidesService } from 'app/slides/slides.service';
import { Slide } from 'ap
浏览 1提问于2017-05-20得票数 7
我使用的是angular material 2 ()，我试图将md-单选按钮的标签放在单选按钮的上方，如下所示：
医生说你可以很容易地将位置设置为之后或之前。我也在使用flex-layout (github.com/angular/flex-layout)。
下面是我的代码：
<md-radio-group formControlName="id_customer_type" (change)="onChangeCustomerType($event.value)">
<md-radio-button type="radio
浏览 5提问于2017-08-23得票数 0
回答已采纳
1回答
我正尝试在我的代码中添加一个mat单选按钮。但是由于某些原因，样式不起作用，我没有创建任何类，也没有覆盖单选按钮样式。填充元素没有居中，并且没有角度材质样式。 ? 之前，我已经将它添加到我的app.module中，并导入到组件中。我使用@angular/material："6.3.0 {
"name": "petpo-fe-admin-dashboard",
"version": "0.0.0",
"scripts": {
"ng": "ng"
浏览 16提问于2019-06-12得票数 1
我是angular的新手，有一个问题是关于一个在消失之前会在页面上短暂呈现的元素。我想要停止这种行为，但我不确定该怎么做。 我有一个单选按钮，其中ng-model="Download“和ng-value="3”。然后是一个div表单，它的ng-hide="Download !=3“。这实际上意味着，除非有人单击单选按钮，否则表单将保持隐藏状态。但是，它看起来好像是先呈现表单，然后再应用ng-hide逻辑。 有没有什么办法让这个表单保持隐藏状态，除非单选按钮被选中，而不是瞬间呈现？
浏览 7提问于2021-08-12得票数 0
当您需要自定义html元素(如按钮、列表框、单选按钮)时，您会做什么？
1
如您所见，在我的示例中有4种布局选择。如果我使用普通的html元素，我将用单选按钮替换Web 2、Classic、Porte、Blog(按钮)。
2
在我的例子中，有“社交网络链接”的选择。用户可以选择任意数量的社交网络。在普通的Html元素中，我会使用一个列表框，让我有机会根据自己的意愿选择许多选项。
下面是本例的实体框架实体
布局
Id
LayoutName
SocialNetwork
Id
NetworkName
IconPath
WebSite
Id
LayoutID (FK With Layou
浏览 1提问于2012-02-11得票数 0
回答已采纳
我已经将Angular Material安装到我的库中，并创建了一个导入和导出所有Material组件的共享资源模块。现在我有一个文件夹，其中包含一个模块和一个组件。模块声明/exports包含组件，imports数组导入共享材料模块。
由于某些原因，该组件不会在storybook中创建故事，也不会通过任何单元测试，因为它找不到从共享资源导入的MatRadioModule。
这是我得到的错误：
模板分析错误：'mat-radio-button‘不是已知元素: 1.如果'mat-radio-button’是一个角度组件，请验证它是否为此模块的一部分。2.如果'mat-ra
浏览 14提问于2020-06-03得票数 0
1回答
我使用的是来自的角度材质。
我按照入门中的步骤操作，并添加了所有依赖项。除了复选框和按钮之外，一切都很正常。
当我对复选框使用这里提到的语法时，我得到了两个复选框，如下所示
此外，我没有得到任何涟漪风格。单选按钮也是如此。有人能帮我解决这个问题吗？
下面是我的app.module.ts代码
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '
浏览 0提问于2017-06-02得票数 1
1回答
我试图显示材料2切换按钮在一个md-list。不知道它们为什么会以单选按钮的形式出现。
<md-list>
<md-button-toggle-group #group="mdButtonToggleGroup">
<md-list-item><md-button-toggle>First Button</md-button-toggle></md-list-item>
<md-list-item><md-button-toggle>Second Button&l
浏览 5提问于2017-02-23得票数 1
1回答
使用梅花在一个按钮内创建一个单选按钮，应该可以点击单选按钮或按钮，当点击其中一个按钮时，必须检查单选按钮。只能选择一种选择，无论是女性还是男性。
我知道我可以使用多个使用状态来点击，但是没有更好的方法吗？
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLa
浏览 15提问于2022-03-25得票数 0
回答已采纳
我搜索了一下，没有找到任何关于javascript / PDF表单应用程序的结果，所以如果有我可能错过的实际结果，我深表歉意。
我有5个单选按钮，都是同步的，如果其中一个被打开，其余的都被关闭。我正在尝试启用，基于选择，为哪个表单(单元格)显示在pdf上。
这就是我目前的立场。此脚本的单选按钮设置为鼠标启动，当启用Text2时将显示，但当选择单独的单选按钮时，Text2仍将显示。只有当我重新选择第一个单选按钮时，Text2才会消失。
我希望根据选中的单选按钮只显示特定的单元格，其余的则隐藏起来。
如果有人能帮我举个小例子，我可以从那里申请。谢谢
if (this.getField("T
浏览 4提问于2017-05-10得票数 0
3回答
app.controller('testCtrl', function ($rootScope, $scope, $mdToast)
{
$scope.showHideToast = function () {
$mdToast.show({
template: '<md-toast>test</md-toast>',
hideDelay: 0,
position: 'bottom right'
浏览 2提问于2014-11-14得票数 4
我已经通过了material.angular.io文档建立一个自定义主题&我试图创建一个自定义主题来覆盖表单控件，如多维输入文本框，文本区，多维选择，复选框，单选按钮控件使用custom_theme.scss文件，它有覆盖这些输入控件的样式。
.mat-select-trigger {
font-size: 12px;
min-width: 200px;
}
类似地，对于其他表单控件覆盖颜色，字体样式，与青色粉色预先构建的主题，但似乎我的样式没有得到应用。
我已经将我的主题加载到.angular-cli.json文件中，如下所示：
"styles":
浏览 0提问于2017-08-03得票数 0
2回答
我有棱角材质对话框，在这里我更新表单击更改状态。
我需要从对话框中的单选按钮中获得价值。
这里是完整的工作示例
这是组件的代码
import {Component, Inject, OnInit, ViewEncapsulation} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef, MatDialog} from "@angular/material";
import {FormBuilder, Validators, FormGroup} from "@angul
浏览 0提问于2018-12-10得票数 3
回答已采纳
我目前正在处理一个问题，根据用户选项，我希望在同一个<td>下显示和隐藏一些字段。条件是，当用户单击customer单选按钮时，我必须显示与客户相关的输入字段，当他单击seller选项单选按钮时，我必须向他显示与卖方相关的信息。默认情况下，我将显示包含与客户相关的信息的panelGroup，代码如下所示
<h:panelGroup id="customnerPanel" rendered="#{saleBean.saleVO.personType == 1}">
all input fields related customer go
浏览 1提问于2014-04-25得票数 1
回答已采纳
3回答
我有一组单选按钮，如下所示。我打算有一个情况，在页面的初始加载默认的单选按钮检查是塑料。下面的代码只保留了我选择的单选按钮。
<div id="material">
<input type="radio" name="materials" value="glass" style="vertical-align: middle"
onchange="this.form.submit()"
<?php if(isset($_POST['materials'
浏览 3提问于2013-04-22得票数 0
回答已采纳
我有一个角度材料树创建复选框和单选按钮动态基于数组 数组如下所示： {
"Documents": {
"angular": {
"src": {
"core": 0,
"compiler": 0
}
},
"material2": {
"src": {
"button": 1,
"chec
浏览 8提问于2019-03-15得票数 0
在使用“material”创建的制表符之间切换会破坏dom中该"tab“的所有子元素。
您可以在下面的项目文件中找到一个简单的应用程序来重现我的问题。我使用的是dart 2 sdk，并以角5.0.0作为依赖项。
main.dart：
import 'package:angular/angular.dart';
import 'package:angular_web_app/app_component.template.dart' as ng;
void main() {
runApp(ng.AppComponentNgFactory);
}
i
浏览 1提问于2018-06-26得票数 1
我使用的是angular 7中的angular材质。
我以前在angular-1中使用过angular-material &它提供了一种方法(md- )来使用所有的颜色。
但是在angular-material-7中，我找不到这些属性。
当我们在像按钮这样的组件中使用颜色时
<button mat-raised-button color="primary">Primary</button>
在颜色方面，我们只能使用原色、重音和警告调色板。但是我想使用比这三种颜色更多的颜色。我想要一种方式来使用所有的材料主题颜色，就像我们在angular-mat
浏览 2提问于2019-03-16得票数 0
HTML文件 <mat-radio-group [(ngModel)]="selectRankExport">
<div class="row ">
<mat-label class="col-md-2">Rank 1</mat-label>
<mat-radio-but
浏览 8提问于2019-02-15得票数 1
回答已采纳
我有一个下拉列表，它将值绑定为SITE、FIBER和OTHERS
下面有两个单选按钮，分别命名为Approve和Reject
现在我想要的是，如果从下拉列表中选择了FIBER，我想隐藏Reject单选按钮。
如何使用Angular JS实现这一点。请帮帮忙
下面是我的代码。
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4/angular.min.js"></script>
<!-- dropdownlist -->
<select class=
浏览 0提问于2019-04-10得票数 0
5回答
覆盖角物质体排版
、、
我在一个角(v5.2.0)应用程序中使用角材料(v5.2.4)创建了一个自定义主题。
我的主题。
@import '~@angular/material/theming';
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400,500');
@include mat-core();
$my-theme-primary: mat-palette($mat-deep-orange);
$my-theme-accent: mat-palette(
浏览 0提问于2018-03-28得票数 7
回答已采纳
我刚刚执行了一个角度更新，并从那时起一直收到关于角材料的下列错误消息：
错误发生在组件LanguageChangeComponent的模板中。src /app/common/language-change/language-change.component.html: 9: 9-错误NG8001：‘mat-单选按钮’不是已知的元素：
如果‘mat-单选按钮’是一个角度分量，则验证它是该模块的一部分。如果‘mat-单选按钮’是组件，则，然后将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的@NgModule.schemas中，以抑制此消息。
我认为模块已经被正确导入，但是错误消息
浏览 1提问于2020-10-05得票数 1
我做了一个输入：
<div class="button-row">
<button md-icon-button><i class="material-icons">mode_edit</i></button>
<button md-icon-button><i class="material-icons">delete_forever</i></button>
浏览 9提问于2017-08-08得票数 0
回答已采纳
1回答
可以在快捷键数据网格的列中定义一个材质按钮吗？ <dx-data-grid [dataSource]="datasource" keyExpr="id">
<dxi-column>
<button mat-button>Basic</button>
</dxi-column>
</dx-data-grid> app.module.ts import { ReactiveFormsModule } from '@angular/forms';
impo
浏览 15提问于2020-07-28得票数 0
回答已采纳
3回答
我在Angular 4材质应用程序中有一组单选按钮：
<md-radio-group fxLayout fxLayoutAlign="center center" fxLayoutGap="30px">
<md-radio-button value="1">Date</md-radio-button>
<md-radio-button value="2">Status</md-radio-button>
<md-radio-button va
浏览 7提问于2017-10-05得票数 11
回答已采纳
我想要设置一些默认值到单选按钮，根据特定的单选按钮应该被选中的值。为此，我在(controlDirectives.js)文件中创建了一个指令radioControlDir。
function controlDir()
{
return {
transclude: true,
restrict: 'E',
scope: {
ngModel: '=',
queObj: '='
},
link: function (scope
浏览 4提问于2016-08-12得票数 2
回答已采纳
1回答
我正在使用AngularJS构建一个表单，其中包含一组单选按钮。我想向我的用户提供一个关于表单上有多少错误的准确计数。我的问题是：
，我正在统计表单上的错误数。
$scope.numberoferrors = function(form) {
var count = 0,
errors = form.$error;
angular.forEach(errors, function(val) {
if (angular.isArray(val)) {
count += val.length;
}
});
return count;
};
我制作了一
浏览 0提问于2015-08-07得票数 1
2回答
我正试图通过以下指南制作一个有角度的web组件：
它可以工作，但是当我必须将services注入到组件中时，没有什么工作了，如果我在构造函数中写入(private service: DataService)，就会有一个空白屏幕，并且没有控制台错误。
import {Component, Injector, Input, OnInit} from '@angular/core';
import {DataService} from '../../_service/data.service';
@Component({
selector: 'optix
浏览 3提问于2020-11-13得票数 2
回答已采纳
1回答
如何在MUI无线按钮上设置标签
、、、、
大家好，我试着在单选按钮上标出标签文本的样式，在选择时更改为蓝色。
，到目前为止，这是我的MUI按钮的代码，
import * as React from "react";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl fr
浏览 1提问于2022-07-15得票数 0
回答已采纳
1回答
我在一个angular 7项目中使用了angular material和ngx-form-schema。如何创建一个指令来处理所有类型的垫子按钮？我想发送垫子按钮的类型，例如‘垫子-扁平按钮’或‘垫子-凸起的按钮’到该指令，然后该指令显示该垫子按钮。
浏览 27提问于2019-02-27得票数 0
1回答
我有一系列的问题，我正在循环通过HTML控件。我的看法是：
@{int index = 0;}
@foreach (Models.Qualification qual in Model)
{
@qual.LeadQualifition; //Here my question will sit
<div class="radio-list radio-list-padding">
<label class="radio-inline">
<input type="ra
浏览 1提问于2014-08-26得票数 0
回答已采纳
我正在尝试在Angular 2+ as done here in angularjs中实现第二次单击时取消选中单选按钮。我有一个使用*ngFor显示的对象数组，因此我在一个表单中有多个单选按钮组。我需要一个实现，它将只取消选中所说的单选按钮/所有的实现，我已经尝试保持选中和取消选中多个按钮，而其他实现根本不起作用。 This is my current code right now.如何使用typescript实现在第二次单击时取消选中单选按钮？
浏览 53提问于2019-03-05得票数 2
回答已采纳
各位总经理，
我在WinForms上使用Vb.net
当我选中groupbox2中的单选按钮时，我想隐藏groupbox1中的所有组件
我需要知道事件的名称以及从单选按钮或组框中选择它的位置。
浏览 4提问于2022-01-12得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
