radio-group 相关问题

控制台中出现 MatRadioGroupComp 警告

我的 Angular 项目中有这段 HTML： 我的 Angular 项目中有这段 HTML： <th2-mat-radio-group [radioButtonList]="isOneWayRadioButtons" [form]="typeSettingForm" formControlFieldName="isOneWay" [required]="false" name="isOneWay"> </th2-mat-radio-group> 但是即使我在这里没有使用禁用属性，我仍然在控制台中收到此警告。如果我删除 [form] 部分，警告就会消失，但表单会停止工作。 Th2MatRadioGroupComponent.ngfactory.js：212 看起来您正在将禁用属性与反应式表单指令一起使用。如果您将禁用设置为 true 当你在组件类中设置此控件时，disabled 属性实际上会在 DOM 中设置 你。我们建议使用此方法来避免“检查后更改”错误。 示例： form = new FormGroup({ first: new FormControl({value: 'Nancy', disabled: true}, Validators.required), last: new FormControl('Drew', Validators.required) }); 我的settings-form.ts中有这个： isOneWay: new FormControl({ value: false, disabled: true }, []), 如何删除此警告并保持按钮功能？非常感谢。 我想从控制台删除警告，但保持表单正常工作。 在 th2-mat-radio-group 的 HTML 中删除您添加的 [disabled] 属性。而是以编程方式设置禁用标志。 const formCtrl = this.form.get('someCtrl'); if(this.someCondition) { formCtrl.enable(); } else { formCtrl.disable(); } 您还可以使用以下指令执行相同的操作，该指令会删除禁用但执行相同的操作。 import { Directive, Input } from '@angular/core' import { NgControl } from '@angular/forms' @Directive({ selector: '([formControlName], [formControl])[disabledControl]', }) export class DisabledControlDirective { @Input() set disabledControl(state: boolean) { const action = state ? 'disable' : 'enable' this.ngControl.control[action]() } constructor(private readonly ngControl: NgControl) {} } HTML： <form [formGroup]="form"> <input type="text" formControlName="name" [disabledControl]="disabledName" /> </form> 文章 - 使用自定义指令禁用反应式表单控件

MatRadioGroupComp wanr 在控制台中

我的 Angular 项目中有这段 HTML： 我的 Angular 项目中有这段 HTML： <th2-mat-radio-group [radioButtonList]="isOneWayRadioButtons" [form]="typeSettingForm" formControlFieldName="isOneWay" [required]="false" name="isOneWay" > </th2-mat-radio-group> 但是即使我在这里没有使用禁用属性，我仍然在控制台中收到此警告。如果我删除 [form] 部分，警告就会消失，但表单会停止工作。 Th2MatRadioGroupComponent.ngfactory.js:212 It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors. Example: form = new FormGroup({ first: new FormControl({value: 'Nancy', disabled: true}, Validators.required), last: new FormControl('Drew', Validators.required) }); 我的settings-form.ts中有这个： isOneWay: new FormControl({ value: false, disabled: true }, []), 如何删除此警告并保持按钮功能？非常感谢。 我想从控制台删除 de warn 但保持表单正常工作。 在 th2-mat-radio-group 的 HTML 中删除您添加的 [disabled] 属性。相反，以编程方式设置禁用标志，或使用以下指令， import { Directive, Input } from '@angular/core' import { NgControl } from '@angular/forms' @Directive({ selector: '([formControlName], [formControl])[disabledControl]', }) export class DisabledControlDirective { @Input() set disabledControl(state: boolean) { const action = state ? 'disable' : 'enable' this.ngControl.control[action]() } constructor(private readonly ngControl: NgControl) {} } 文章 - 使用自定义指令禁用反应式表单控件

我的单选按钮未按预期工作

我有一个表单组件，它利用react-hook-form来处理表单提交。但是，我的MUI Radio组没有按照预期正确设置值。我有两个单选选项，Male和

ExtJS 中同名单选按钮问题

这个问题在ExtJS 6.0之前工作得很好。 从 ExtJS 6.0 升级到 ExtJS 6.2 后我开始遇到这个问题。 我在 ExtJS 中创建了两个表单面板。 向每个面板添加单选按钮后，...

Angular 17 Reactive Form：尽管有布尔值，单选按钮始终在加载时检查

我正在开发一个 Angular 组件，该组件使用带有单选按钮的反应式表单。我想创建三个代表布尔选择（真或假）的单选按钮。单选按钮正在初始化...

将值返回到 Razor 页面 - 混淆 Javascript 或 .cs？

我对类似问题的答案感到困惑，但我也简化了我的应用程序以删除一个步骤，试图使其更清晰。我希望有人能引导我朝着正确的方向前进......

与MUI组件集成时，React-Hook-Form Controller应该放在哪里？

我很困惑在与 MUI CheckBox、Select 或 RadioGroup 集成时将 React-Hook-Form Controller 放置在哪里。以下面两个代码片段为例。 <

使用 Tab 键时无法到达单选按钮（带有嵌套控件）

我的代码按预期 100% 运行。所有控件都可以使用 Tab 键或箭头键访问，但标记为“无筛选”的第二个单选按钮除外，该按钮永远无法访问。 有没有

我如何在reactJS中的一行中创建输入[无线电和文本]

“首先，我接受一个输入=>无线电，其次，我接受一个输入=>文本。当我点击文本=>输入时，它应该检查无线电=>输入，而且，当我点击收音机 => ...

如何在MAUI中创建无线电组？

我是毛伊岛的新手。在这里，我们可以选择创建 RadioButton，但是当涉及到 RadioGroup 时，我没有找到任何确切的解决方案。 我想创建单选按钮的动态列表。所以类似

如何取消选中另一个单选组中的单选按钮？

我在一个 xml 文件中有两个无线电组： 我在一个 xml 文件中有两个无线电组： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <RadioGroup android:layout_width="wrap_content" android:layout_height="wrap_content"> <RadioButton android:id="@+id/btn_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onRadioButtonClicked" /> <RadioButton android:id="@+id/btn_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onRadioButtonClicked" /> </RadioGroup> <RadioGroup android:layout_width="wrap_content" android:layout_height="wrap_content"> <RadioButton android:id="@+id/btn_3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onRadioButtonClicked" /> <RadioButton android:id="@+id/btn_4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onRadioButtonClicked" /> </RadioGroup> </LinearLayout> 在主要活动中，我可以通过实现 onRadioButtonClicked() 方法来处理单击侦听器上的单选按钮： public void onRadioButtonClicked(View view) { // Is the button now checked? boolean checked = ((RadioButton) view).isChecked(); // Check which radio button was clicked switch(view.getId()) { case R.id.btn_1: break; case R.id.R.id.btn_2: break; case R.id.R.id.btn_3: break; case R.id.R.id.btn_4: break; } } 现在，在同一个单选组中，如果选中一个单选按钮，则自动取消选中另一个。所以这是我的问题：我希望如果选中一个按钮，则取消选中同一组和另一组中的其他按钮。这可行吗？ 谢谢。 您可以手动完成。 case R.id.btn_1: btn3.setChecked(false); btn4.setChecked(false); break; case R.id.btn_2: btn3.setChecked(false); btn4.setChecked(false); break; case R.id.btn_3: btn1.setChecked(false); btn2.setChecked(false); break; case R.id.btn_4: btn1.setChecked(false); btn2.setChecked(false); break; 希望有帮助。 RadioGroup 上有一个 clearCheck() 方法。

Blazor 输入无线电

当我们在InputRadioGroup中时，如何让单选按钮默认选中？这似乎不起作用： 当我们在InputRadioGroup中时，如何让单选按钮默认选中？这似乎不起作用： <InputRadio class="mr-1" Name="Selected" Value="@("General")" checked="checked"></InputRadio> InputRadioGroup 中 @bind-Value="@_model.SelectedManufacturer" 的值设置组的值，下面的代码将在开始时将选定的单选按钮设置为 tesla，就像它在表格类 <EditForm Model="_model"> <InputRadioGroup @bind-Value="@_model.SelectedManufacturer"> Manufacturer: <br> @foreach (var manufacturer in Manufacturers) { <InputRadio Value="manufacturer" /> @manufacturer <br> } </InputRadioGroup> </EditForm> @code { List<String> Manufacturers = new List<string> { "Ford", "Toyota", "Tesla" }; FormClass _model = new FormClass(); class FormClass { public String SelectedManufacturer { get; set; } = "Tesla"; } } 我在 .net 8 blazor SSR 中遇到了这个问题，我通过使用 type="radio" 和 name="vm.TermsOfDelivery" 和 value="1" 的 usinf 输入标记解决了这个问题，并手动检查。我还使用了引导类。 <EditForm Model="vm" method="post" OnValidSubmit="Submit" FormName="loi" Enhance> <div class="mb-3"> Terms of Delivery: <input id="r1" class="form-check-input ms-2 pointer" type="radio" name="vm.TermsOfDelivery" value="1" checked> <label class="form-check-label pointer" for="r1">Exwork</label> <input id="r2" class="form-check-input ms-2 pointer" type="radio" name="vm.TermsOfDelivery" value="2"> <label class="form-check-label pointer" for="r2">FOB</label> <input id="r3" class="form-check-input ms-2 pointer" type="radio" name="vm.TermsOfDelivery" value="3"> <label class="form-check-label pointer" for="r3">CFR</label> </div> public class LoiAddVm { public byte TermsOfDelivery { get; set; } } [SupplyParameterFromForm] public LoiAddVm vm { get; set; } = new() { TermsOfDelivery = 1 }; 名称=“vm.TermsOfDelivery”，因为 Microsoft 的 InputRadioGroup 期望如此。 vm 是通过 [SupplyParameterFromForm] 属性绑定的 EditForm 模型的名称。

不确定如何将 Radio 组添加到也使用材料 UI 的预先存在的 Formik 表单中

我是 REACT 新手，我正在尝试通过修改现有示例来学习：这里我正在遵循使用 Formik 和 Material UI 的教程，我正在努力将文本输入框更改为...

有没有办法去除单选按钮组（显示为药丸按钮）所选按钮上的紫色框？甲骨文 Apex

选中的按钮上有一个紫色框。有什么办法可以去除吗？ 我尝试了很多 CSS 的方法，但没有成功。我究竟做错了什么？ .您的无线电组级输入...

无法像不喜欢 Vue 2 组件一样撤消

喜欢不喜欢组件 我在使其按预期工作时遇到一些困难，完全需要一些帮助 要求 当没有选择任何内容并且我点击“like”时，它应该选择“L...

如何更改悬停时选中的单选按钮的颜色？

<!-- This is my html input tag --> <input class="custom-radio" type="radio" name="selected_center" value="{{center.id}}" id="selected_center_{{center.id}}"> <!-- Only CSS I am using for my custom color using accent property but cant change the color on hover --> input[type='radio'] { accent-color: #0098ff; } 我已将悬停属性与输入单选标签一起使用，但不起作用。 不确定您为什么要这样做，但您可以做到。 body { margin: 1em; font-family: sans-serif; } .custom-radio>label { display: block; font-size: 1.5em; margin: 0.25em 0; } .custom-radio>label>input[type=radio] { transform: scale(2); vertical-align: middle; margin-right: 1em; } .custom-radio>label:nth-child(1)>input[type=radio] { accent-color: red; } .custom-radio>label:nth-child(2)>input[type=radio] { accent-color: darkorange; } .custom-radio>label:nth-child(3)>input[type=radio] { accent-color: green; } .custom-radio>label:hover { color: blue; } .custom-radio>label:hover>input[type=radio] { accent-color: blue; } .custom-radio>label>input[type=radio]:not(:checked) { cursor: pointer; } <div class="custom-radio"> <label><input type="radio" name="radio1"> Stop</label> <label><input type="radio" name="radio1"> Wait</label> <label><input type="radio" name="radio1"> Go</label> </div>

Web 组件输入单选不在组中

我有WC 女巫是我的表单和输入字段的包装。 在 m-form 的 renderHTML() 中我这样做： 渲染 HTML() { this.loadChildComponents().then(children => { ...

RadioGroup：水平布局和跨多行

安卓2.3.3 我的 RadioGroup 中有大约 5 个 RadioButton。我不希望方向是垂直的，因为它占用了大部分可用空间。如果我保持水平方向，只有 2 ...

动态加载数据时，如何为 Angular 中的数组分配默认值？

我有一个名为“习惯”的数组。像这样 我将其显示在带有单选按钮的表格中（是，否）。 我有一个名为“习惯”的数组。像这样 我将其显示在带有单选按钮的表格中（是，否）。 <tr *ngFor="let habits of masterDate.data.habits; index as x"> <th class="tbl-border-right-bottom text-wrap" style="width: 50%"> {{ habits.name }} <div hidden="true"> <input type="text" formControlName="habitsSufferedMainId{{ x }}" /> </div> </th> <td class="tbl-border-right-bottom"> <div class="col-md-6"> <div class="form-group d-flex justify-content-around pr-2"> <div class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="habitsSufferedMain{{ x }}" value="1" name="habitsSufferedMain{{ x }}" formControlName="habitsSufferedMain{{ x }}" /> <label class="custom-control-label" for="habitsSufferedMain{{ x }}">Yes</label> </div> <div class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="isMainHabitNo{{ x }}" value="0" name="habitsSufferedMain{{ x }}" formControlName="habitsSufferedMain{{ x }}" [checked]="true" /> <label class="custom-control-label" for="isMainHabitNo{{ x }}">No</label> </div> </div> </div> <div class="form-group"> <textarea placeholder="If 'Yes' please give details" class="form-control form-control-sm" rows="2" formControlName="habitsSufferedMainReason{{ x }}"></textarea> </div> </td> </tr> 如何将默认值设置为“否”。 根据点击是或否，将值放入数组中。 首先创建一个地图来存储结果 const results = new Map<number, boolean>(); 您可以使用 FormControl() 设置复选框的默认值 const habitOne = new FormControl(false); results['habitOne'].set(false); 然后监听 valueChanges oberbable 将结果存储在 Map 中 habitOne.valueChanges.subscribe(value => { results.set('habitOne', value) }) 当然，您可以使用 FormBuilder 通过循环来完成此操作。 （但请记住以反应形式包装所有输入<form [formGroup]=form> form: FormGroup; constructor(private fb: FormBuilder) { this.form = this.fb.group( this.habits.reduce((controls, habit, index) => { this.results.set(index, false) return { ...controls, [`habit${index}`]: new FormControl(false) } }, {})); Object.keys(this.form.controls).forEach((control, index) => { control.valueChanges.subscribe(value => { this.results.set(index, value == true) }) } }

多个单选按钮组均可在同一次单击上切换

在我的角度应用程序中，我只是尝试创建多个单选按钮组。一个组看起来像这样： 在我的角度应用程序中，我只是尝试创建多个单选按钮组。一组看起来像这样： <input [formControl]="ctrlx" type="radio" [value]="true" id="idx" autocomplete="off"/> <label for="idx">Yes</label> <input [formControl]="ctrlx" type="radio" [value]="false" id="idy" autocomplete="off" /> <label for="idy">No</label> 演示 奇怪的是，正如您在演示中看到的那样，当您单击其中一个收音机时，其他所有收音机也会发生变化。不知何故，我的无线电组已连接。有什么建议我在这里做错了吗？ 只需给每个组一个唯一的名称 <div> <input [formControl]="ctrlx" type="radio" [value]="true" id="idx" name="a" autocomplete="off"/> <label for="idx">Yes</label> <input [formControl]="ctrlx" type="radio" [value]="false" id="idy" name="a" autocomplete="off" /> <label for="idy">No</label> </div>