创建单选按钮之类的复选框 Angular

Question

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

Answer 1

那么在单选按钮的行为下，你的意思是一次只能选择一个复选框？

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

时添加 checked

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

请记住，selectedValue 和名称引用的值必须是唯一的。

工作示例：https://stackblitz.com/edit/angular-reactive-form-checkbox-radio-e3n8yz?file=src%2Fapp%2Fapp.component.ts

创建单选按钮之类的复选框 Angular

Create checkboxes like radio buttons Angular

checkbox

checkboxlist

angular