Переключение между элементами управления formarray и другим элементом управления формы не работает в angular?

Question

Привет, у меня проблема angular 5. Он доступен в блиц-стеке здесь. https://angular-ivy-jmrzng.stackblitz.io/

Проблема в том, что у меня форма angular 5. в форме angular у меня есть элемент управления массивом форм с именем авторитеты и другой элемент управления с именем censorshipApprover.

this.formGroup = this.fb.group({
  authorities: this.fb.array([], Validators.required),
  censorshipApprover: ['']
});

Как элементы управления массива формы, так и элемент управления с именем censorshipApprover отображаются в виде флажков. Проблема, когда я устанавливаю флажок в массиве форм, он должен снимать флажок censorshipapprover. Кроме того, когда я проверяю элемент управления, утверждающий цензуру, я хотел бы отключить все элементы управления в массиве форм. Однако это не работает. любая идея, что мне делать для достижения этой функциональности. следующее - logi c

enum Authority {
  SYSTEM_ADMIN = 'ROLE_SYSTEM_ADMIN',
  GLOBAL_ADMIN = 'ROLE_GLOBAL_ADMIN',
  ACCOUNT_ADMIN = 'ROLE_ACCOUNT_ADMIN',
  ANONYMOUS = 'ROLE_ANONYMOUS',
  CAMPAIGN_MANAGER = 'ROLE_CAMPAIGN_MANAGER',
  TEAM_MEMBER = 'ROLE_TEAM_MEMBER',
  CENSORSHIP_APPROVER = 'ROLE_CENSORSHIP_APPROVER'
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  name = 'Angular ' + VERSION.major;

  authorities: Authority[] = [
    Authority.TEAM_MEMBER,
    Authority.CAMPAIGN_MANAGER,
    Authority.ACCOUNT_ADMIN
  ];

 formGroup: FormGroup;
 constructor(private fb: FormBuilder){}
 
  ngOnInit() {

    this.formGroup = this.fb.group({
      authorities: this.fb.array([], Validators.required),
      censorshipApprover: ['']
    });

    this.authorities.forEach(e => {
        this.authoritiesArray.push(this.fb.control(false));
    })


    this.authoritiesArray.valueChanges.subscribe(values => {
      this.censorshipApproverControl.setValue(false);
    });

  this.censorshipApproverControl.valueChanges.subscribe(value => {
     if (value) {
          this.authoritiesArray.controls.forEach(control => {
            control.setValue(false);
          });
    }
  });

  }
  get censorshipApproverControl(): FormControl {
    return this.formGroup.get('censorshipApprover') as FormControl;
  }
  get authoritiesArray(): FormArray {
    return this.formGroup.get('authorities') as FormArray;
  }
}

следующее - html шаблон

<form novalidate [formGroup]="formGroup">

  <div *ngFor="let authority of authoritiesArray.controls; let i = index" formArrayName="authorities">
   User-Role-{{ i }} <input type="checkbox" [formControlName]="i" /> 
  </div>  

  <div> Or </div>

  Censor-Role <input
    formControlName="censorshipApprover"
    type="checkbox"
  />

</form>

Вы также можете получить доступ к stackblitz в этом месте https://stackblitz.com/edit/angular-ivy-jmrzng?embed=1&file=src / app / app.component. html

когда вы поиграете со stackblitz, вы увидите, что я могу проверить User-Role-0, User-Role-1 и User-Role-2 а затем я проверяю Censor-Role, он снимает флажки User-Role-0, User-Role-1 и User-Role-2. Однако, когда я проверяю Censor-Role, она не проверяется.

Как я могу этого добиться. спасибо

Answer 1

Изменения значений authorities всегда устанавливают значение censorshipApprover как false. Вот почему это не проверяется. Вы можете сделать, как показано ниже, если в массиве authorities установлен один флажок, тогда измените только статус censorshipApprover

this.authoritiesArray.valueChanges.subscribe(values => {
  if (values.some(val => val === true)) {
    this.censorshipApproverControl.reset();
  }
});

this.censorshipApproverControl.valueChanges.subscribe(value => {
  if (value) {
    this.authoritiesArray.reset();
  }
});

Рабочий stackblitz