创建复选框，例如无线电按钮Angular

发布于 2025-01-18 17:04:21 字数 324 浏览 3 评论 0 原文

我想创建行为类似于单选按钮的复选框。当程序第一次执行时，第一个应该为真。这是我到目前为止所尝试过的。 https:// stackblitz.com/edit/angular-reactive-form-checkbox-radio-bveatn?file=src%2Fapp%2Fapp.component.html 非常感谢任何帮助。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

Hello爱情风 2025-01-25 17:04:21

因此，在无线电按钮的行为下，您意味着一次只能选择一个复选框？

例如，我们可以在 input.value === selectedValue

<input type="checkbox" value="Product" #product
[checked]="product.value === selectedValue"
(change)="onItemChange($event.target.value)" />Product

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
 
  selectedValue = 'Product'


  onItemChange(selectedValue: string) {
    this.selectedValue = selectedValue;
    console.log(" Value is : ", selectedValue);
    return this.selectedValue;
  }
}

请记住 selected> selected Value 和名称引用时需要添加检查 独特的。

工作示例：

So under behavior of radio buttons you mean only one checkbox can be selected at a time?

We could, for example, add checked when input.value === selectedValue

<input type="checkbox" value="Product" #product
[checked]="product.value === selectedValue"
(change)="onItemChange($event.target.value)" />Product

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
 
  selectedValue = 'Product'


  onItemChange(selectedValue: string) {
    this.selectedValue = selectedValue;
    console.log(" Value is : ", selectedValue);
    return this.selectedValue;
  }
}

Keep in mind that values for selectedValue and name references need to be unique.

Working example: https://stackblitz.com/edit/angular-reactive-form-checkbox-radio-e3n8yz?file=src%2Fapp%2Fapp.component.ts

回复收藏 0 原文

~没有更多了~