Как помешать проверке переключателя на наличие проверки?

Question

У меня есть макет с тремя переключателями, как это:

<div class="radio">
        <label>
          <input type="radio" name="optradio" value="ABC" (change)= "showSection($event, 'abc')" checked>&nbsp; <span> ABC </span>
        </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio"  name="optradio"  value = "EFG" (change) = "showSection($event, 'EFG')">&nbsp;<span> EFG </span> 
          </label>
        </div>
        <div class="radio ">
          <label>
            <input type="radio"   name="optradio" value = "HIJ"  (change) = "showSection($event, 'HIJ')">&nbsp;<span> HIJ </span> 
          </label>
        </div>

Теперь у меня есть два массива

let array_one = [];
let array_two = [];

У меня есть подтверждение, что если array_two.length <=1 я не должен бытьвозможность переключаться между переключателями

Я использовал угловую, моя проблема в том, что я могу выполнить проверку, но дело в том, что переключатели проверяются и достигают выбранного.

например:

Я на 2-й радио-кнопке и теперь array_two.length <= 1 удовлетворена, но теперь при нажатии на 1-ю радио-кнопку 1-я проверяется.я должен помешать 1-й проверке </p>

пожалуйста, кто-нибудь может помочь

Answer 1

Если я правильно понял, вам нужно отключить все переключатели при условии.Для этого вам нужно использовать привязку свойства disabled с переключателями в виде

[disabled]="array_two.length <=1"

Stackblitz в https://stackblitz.com/edit/angular-disable-radio-group-on-condition

Answer 2

Я не уверен, что это то, что вы хотите:

https://stackblitz.com/edit/angular-aphp8r

Я создал группу форм, которая проверяет значение его детей:

this.form = new FormGroup({
  gender: new FormControl(),
  age: new FormControl(),
  city: new FormControl()
});

когда вы щелкаете по радиокнопке, его значение передается в массив, и условие

array_two.length <= 1 становится истинным: </p>

this.Gender.valueChanges.subscribe(
      (x) => {
        this.array_one.push(x);
      }
    );

    this.Age.valueChanges.subscribe(
      (x) => {
        this.array_one.push(x);
      }
    );

    this.City.valueChanges.subscribe(
      (x) => {
        this.array_one.push(x);
      }
    );

, когда действие инициируется в группе форм,группа form проверяет дочерние элементы formcontrol и просматривает их значение, если значение равно null, это означает, что оно не было проверено, поэтому отключает formcontrol.Чтобы получить это, я просто перебираю объект, чтобы получить ключ, ключ - это имя formcontrol, и я использую его, чтобы отключить его, если оно пустое.

this.form.valueChanges.subscribe(
      (x) => {
        if(this.array_one.length >= 1) {
         for(var k in x) {
           console.log(k, x[k]);

           if(x[k] == null) {
             this.form.get(k).disable();
           }

          } 
        }
      }
    );

Если у вас есть какие-либо вопросы относительнокод или другие вещи, пожалуйста, скажите мне.Я настоятельно рекомендую вам использовать реактивную форму [0], чтобы полностью контролировать логику.

[0] https://angular.io/guide/reactive-forms