Angular 在formarray控件和另一个form控件之间切换是否在角度模式下不起作用？

嗨，我有一个角度5的问题。它在这里的stack blitz中可用。

问题是我有一个角度为5的表格。在angular表单中，我有一个名为Authories的表单数组控件和另一个名为Approver的控件

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

表单数组控件和名为Approver的控件都显示为复选框。当我在表单数组中选中复选框控件时，它应该取消选中审查批准者控件。此外，当我检查审查批准人控件时，我希望取消检查formarray中的所有控件。 但是它不起作用。你知道我应该怎么做才能实现这个功能吗。以下是逻辑

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>

用户角色-{i}
或
审查员角色

您也可以在此位置访问stackblitz

当您玩stackblitz时，您可以看到我可以选中User-Role-0、User-Role-1和User-Role-2，然后我选中审查员角色，它将清除User-Role-0、User-Role-1和User-Role-2复选框。但是，当我检查审查员角色时，它没有被检查

我怎样才能做到这一点。

---

谢谢

权限的值更改始终将

审查批准人

值设置为false。这就是为什么它没有得到检查。您可以执行以下操作，如果在

权限

数组中选中了一个复选框，则只更改

审查批准人

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

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

---

工作

权限的值更改始终将

审查批准人

值设置为false。这就是为什么它没有得到检查。您可以执行以下操作，如果在

权限

数组中选中了一个复选框，则只更改

审查批准人

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

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

工作