嗨，我有一个5号角问题。它在这里可用于堆栈闪电战。https://angular-ivy-jmrzng.stackblitz.io/
问题是我有一个角5形式。在角形式中，我有一个名为Authority的表单数组控件和另一个名为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，它将清除User-Role-0， User-Role-1和User-Role-2复选框。但是，当我检查Censor-Role时，它没有得到检查。
我怎样才能做到这一点。谢谢
authorities总是将censorshipApprover值设置为false的Valueschanges 。这就是为什么它没有得到检查。您可以按照以下步骤操作，如果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();
}
});
工作堆闪电战
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句