如何根据角度 6 中的其他单选按钮启用或禁用单选按钮

Question

我创建了一组单选按钮。有 3 个单选按钮 Radio1、Radio2、Radio3。 Radio3 具有子单选按钮，即 RadioSub1、RadioSub2、RadioSub3。这里我想做的是

每当我选择单选按钮 Radio1 或 Radio2 时，应禁用 Radio3 的子单选按钮 RadioSub1、RadioSub2、RadioSub3。只有当我选择 Radio3 时，才应启用 RadioSub1、RadioSub2、RadioSub3。并且始终需要选择 RadioSub1。请帮忙！！！

      <div class="form-group col-md-12">
        <div class="custom-control custom-radio">

          <ul>
            <li>
              <input name="r1" id="r1" class="custom-control-input" type="radio" value="0" (change)="Change($event)">
              <label class="custom-control-label" for="r1">Radio1</label>&nbsp;
            </li>

            <li>
              <div class="mb-2">
                <input name="r1" id="r2" class="custom-control-input" type="radio" value="1" (change)="Change($event)">
              <label class="custom-control-label" for="r2">Radio2</label>
              </div>
            </li>


            <div>
            <li>
              <input name="r1" id="r3" class="custom-control-input" type="radio" value="2" (change)="Change($event)">
              <label class="custom-control-label" for="r3">Radio3</label>&nbsp;
              <ul>

                <li>
                  <input name="subRadio" id="subRadio1" class="custom-control-input" type="radio" value="4" (change)="Change($event)" [attr.disabled]="optionDisable==false || null">
                  <label class="custom-control-label" for="subRadio1">RadioSub1</label>&nbsp;
                </li>
                <div class="row">
                    <div class="col-md-4">
                   <li>
                     <input name="subRadio" id="subRadio2" class="custom-control-input" type="radio" value="5" (change)="Change($event)"  [attr.disabled]="optionDisable==false || null">
                     <label class="custom-control-label" for="subRadio2">RadioSub2</label>&nbsp;
                   </li>

                   <li>
                     <input name="subRadio" id="subRadio3" class="custom-control-input" type="radio" value="6" (change)="Change($event)"  [attr.disabled]="optionDisable==false || null">
                     <label class="custom-control-label" for="subRadio3">RadioSub3</label>&nbsp;
                   </li>
                  </div>
                 </div>

              </ul>
            </li>
            </div>

          </ul>
        </div>
      </div>

ts 文件

Change(event){
if(event.target.value===2){
this.optionDisable=true;
}
}

Answer 1

试试这个代码..

    <form [formGroup]="testForm" novalidate>
     <mat-radio-group (change)="getData()" formControlName="checkbox">
<mat-radio-button  value="one" color="primary">Radio1 </mat-radio-button>
<mat-radio-button value="two" color="primary">Radio2 </mat-radio-button>  
<mat-radio-button value="three" color="primary" >Radio3 </mat-radio-button> 
</mat-radio-group>

 <div *ngIf="flag==1">
 <mat-radio-group formControlName="check3">
 <mat-radio-button  value="sub1" color="primary">RadioSub1 </mat-radio-button>
 <mat-radio-button  value="sub2" color="primary">RadioSub2 </mat-radio-button>  
  <mat-radio-button  value="sub2" color="primary">RadioSub3 </mat-radio-button>  
</mat-radio-group>

在ts中

  export class AppComponent implements OnInit  {

   public testForm: FormGroup;
  flag:number=0;
  constructor(private fb: FormBuilder){}
 ngOnInit(){
    this.flag=0;
    this.testForm = this.fb.group({
  checkbox: ['One', [Validators.required]],
  check3:['sub1']
});

  }
  getData()
 {
  if(this.testForm.controls['checkbox'].value=='three')
  {
  this.flag=1;
  }
  }
 }