Как включить или отключить переключатель на основе других переключателей в angular6

Question

Я создал набор радиокнопок. Есть 3 радиокнопки Радио1, Радио2, Радио3. И Radio3, имеющий вспомогательные радиокнопки, а именно RadioSub1, RadioSub2, RadioSub3. Вот что я хочу сделать:

Всякий раз, когда я выберу радиокнопку Radio1 или Radio2, вспомогательные радиокнопки Radio3, а именно RadioSub1, RadioSub2, RadioSub3, должны быть отключены. и RadioSub1, RadioSub2, RadioSub3 должны быть включены только тогда, когда я выберу Radio3. И всегда 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>

тс файл

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>

в тс

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