在 angular 中无法在 formarray 控件和另一个表单控件之间切换？

Question

您好，我有一个 angular 5 问题。它可以在此处的堆栈闪电战中使用。 https://angular-ivy-jmrzng.stackblitz.io/

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

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

表单数组控件和名为 censorshipApprover 的控件都显示为复选框。当我检查表单数组中的复选框控件时出现问题，它应该取消选中 censorshipapprover 控件。此外，当我检查审查批准者控件时，我想取消选中 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>

您也可以在此位置访问 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，它将清除用户-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

在 angular 中无法在 formarray 控件和另一个表单控件之间切换？

Toggle between a formarray controls and another form control is not working in angular?

angular

angular-reactive-forms

angular-forms

angular5

angular-formbuilder