typescript 取消选择单选按钮Angular 2?

r3i60tvu  于 2023-06-24  发布在  TypeScript
关注(0)|答案(5)|浏览(124)

我正在尝试取消选择Angular 2中的单选按钮。我尝试了下面的代码,但它没有帮助。
联系我们

<div [formGroup]="myForm">
   <mat-radio-group matInput (click)= "resetRadio($event)" formControlName="RdoSel">
      <mat-radio-button *ngFor="let RadioOpt of RadioOpts" [value]="RadioOpt .id">{{RadioOpt .value}}</mat-radio-button>
   </mat-radio-group>
</div>

*.ts

public RadioOpts= [
    { id: 'Market', value : 'Market'},
    { id: 'Segment', value : 'Segment'}
];

public resetRadio(event: any) {
if(myForm.get('RdoSel').value===event.target.value){
    myForm.get('RdoSel').setValue('false');
}

当I console.log(event.target.value)时,它返回<div>标记。有人能告诉我如何在Angular 2中取消选择单选按钮吗?

tvz2xvvm

tvz2xvvm1#

使用React形式,我们可以使用

yourFormName.controls['youRradioFormContolName'].reset();

这将重置你的无线电为未选中。

qf9go6mv

qf9go6mv2#

对我来说,它的作用是:

html:

<mat-radio-button value="1" 
                  (click)="clickRadio($event, 1)" 
                  [checked]="isRadioSelected(1)">1</mat-radio-button>

ts:

private radioVal:number;
public clickRadio(event:Event, value:any) {
    event.preventDefault();

    if (! this.radioVal || this.radioVal !== value) {
        this.radioVal = year;
        this.form.patchValue({myForm: this.radioVal});
        return;
    }

    if (this.radioVal === value) {
        this.radioVal = undefined;
        this.form.get('myForm').reset();
    }
}

public isRadioSelected(value:any) {
    return (this.radioVal === value);
}
hpcdzsge

hpcdzsge3#

要关闭单选按钮,您可以在单选按钮的html属性“checked”上使用绑定,然后在组件中创建一个属性(变量),如“radioStatus:boolean;",如上所述。然后,您可以通过将false或true赋给radioStatus来更改绑定的值。您可以通过事件访问单选按钮的当前值。下面是一些例子。
HTML

<input type="radio" name="example" [checked]="radioStatus" (change)="example($event)"/>

在组件-属性中

radioStatus: boolean;

在组件-视图当前值中

example($event) {
   console.log(event.target['checked']);
}

在组件中-从单选按钮中删除检查

example($event) {
   this.radioStatus = false;
}
rdlzhqv9

rdlzhqv94#

非物质解决方案

您可以使用@ViewChilder如下(我的代码)

<div *ngFor="let item of items">
    <label>
        <input
            #radioInput
            type="radio"
            [value]="item.id"
            [checked]="item.checked"
            (input)="onChange(item, radioInput)"
        />
        <span>{{ item.label ? item.label : item.labelKey }}</span>
    </label>
</div>

和.ts文件中

@ViewChildren('radioInput') radioInputs: ElementRef[];
...

onChange(chosenItem: FieldRadioItem, inpCheckbox: HTMLInputElement) {

    [...this.radioInputs].forEach((inp) => {
            if (inp.nativeElement != inpCheckbox) inp.nativeElement.checked = false;
    ...
});

FieldRadioItem只包含字段idlabelchecked。在Angular 11上测试

lzfw57am

lzfw57am5#

原生解决方案取消选择Angular中的单选按钮:
示例:

<input type="radio" name="radio5" id="radio4" class="css-checkbox" value="all" [(ngModel)]="selected" name="radioModel"/> final

<input type="radio" name="radio5" id="radio4" class="css-checkbox" value="notall" [(ngModel)]="selected" name="radioModel"/> preliminary

它的工作Angular 为8。
参考文献:
https://stackblitz.com/edit/angular-radio-uncheck-all?file=src%2Fapp%2Fapp.component.html

相关问题