angular - *hasPermission 指令的角度反应形式模型数据
问题描述
我有一个反应式表单,它现在工作正常但是我刚刚添加了一些与权限相关的复选框,并且通过这些复选框我需要为创建的用户分配权限。有 3 种用户,他们可以拥有分配给他们的全部或选定的权限。我也能够以某种方式从这些复选框中获取数据,但我需要以这样一种方式对数据进行建模,即权限必须包含在字符串数组中才能使 *hasPermission 指令起作用。这是样品所需的型号。Y=
"skipTracing": {
"permissions": ["view", "get"]
},
"affiliates": {
"permissions": ["view"]
}
非常感谢您在设置正确模型方面的帮助
PS如果这里有很多代码,我很抱歉,但是在发布这个问题时从代码中删除选定的行似乎毫无意义。
这是我的 .ts 文件代码
export class AddMemberComponent extends AppBaseComponent implements OnInit {
public activeRoute: string;
private userId: string;
private userData: Customer;
public userDetailsForm: FormGroup;
public permission = PERMISSIONS_LIST;
public timeZoneList: TimeZone[] = TIMEZONE;
public roles = [];
public isFormLoaded = false;
constructor(
private inj: Injector,
private route: ActivatedRoute,
private teamService: TeamService
) {
super(inj);
this.route.url.subscribe((routeParams) => {
this.activeRoute = routeParams[1].path;
if (this.activeRoute === 'edit') {
this.navigationState.breadCrums = [
new BreadCrumb('Settings', USER_NAVIGATION_LINKS.settings),
new BreadCrumb('Team', USER_NAVIGATION_LINKS.team),
new BreadCrumb('Edit'),
];
} else {
this.navigationState.breadCrums = [
new BreadCrumb('Settings', USER_NAVIGATION_LINKS.settings),
new BreadCrumb('Team', USER_NAVIGATION_LINKS.team),
new BreadCrumb('Add'),
];
}
});
this.navigationService.updateNavigationState(this.navigationState);
}
/**
* @ngdoc method
* @description
* A lifecycle hook that is called after Angular has
* initialized all data-bound properties of a directive.
* @returns void
*/
public ngOnInit(): void {
this.route.url.subscribe((routeParams) => {
this.blockUI.startLoader();
this.activeRoute = routeParams[1].path;
if (this.activeRoute === 'edit') {
this.route.paramMap.subscribe((params) => {
this.userId = params.get('id');
this.getUserDetails(this.userId);
});
} else {
this.initForm();
this.blockUI.stopLoader();
}
});
}
/**
* @ngdoc method
* @description
* init from with validation
*/
private initForm() {
this.userDetailsForm = this.formBuilder.group(
{
memberFirstName: [
'',
ValidationUtil.requiredNonSpace,
ValidationUtil.onlyAlphabets,
],
memberLastName: [
'',
ValidationUtil.requiredNonSpace,
ValidationUtil.onlyAlphabets,
],
memberEmail: [
'',
[ValidationUtil.requiredNonSpace, ValidationUtil.validateEmail],
],
memberMobileNumber: [
'',
[
ValidationUtil.requiredNonSpace,
Validators.minLength(10),
Validators.maxLength(10),
],
],
memberPassword: [''],
memberConfirmPassword: [''],
timezone: ['', ValidationUtil.requiredNonSpace],
randomPassword: [true],
sendEmail: [true],
isActive: [true],
selectAll: [false],
skipTracing: this.initPermissions(
this.permission.skipTracing,
'skipTracing'
),
affiliates: this.initPermissions(
this.permission.affiliates,
'affiliates'
),
integrations: this.initPermissions(
this.permission.integrations,
'integrations'
),
},
{
validator: ValidationUtil.MustMatch(
'memberPassword',
'memberConfirmPassword'
),
}
);
if (this.activeRoute === 'edit') {
this.prepareFormWithData();
}
this.isFormLoaded = true;
}
/**
* @ngdoc method
* @description
* select or deselect all permission
* on select all checkbox clicked
*/
public onSelectAllClicked() {
const checkValue: boolean = this.userDetailsForm.controls.selectAll.value;
this.togglePermissionCheckboxes('skipTracing', checkValue);
this.togglePermissionCheckboxes('affiliates', checkValue);
this.togglePermissionCheckboxes('integrations', checkValue);
}
private togglePermissionCheckboxes(type: string, value: boolean) {
const that = this;
this.permission[type].forEach((permission, i) => {
console.log(permission);
console.log(this.permission[type][i]);
let permissionData = { permissions: [] };
if (this.permission[type]) {
permissionData.permissions.push(permission.value);
const group: FormGroup = that.userDetailsForm.controls[
type
] as FormGroup;
console.log(group.value);
group.controls[type + i].setValue(permissionData);
}
console.log('Permission Data', permissionData);
});
}
}
HTML 代码
<div class="ml-4 add-member-form">
<div class="col-md-12 col-lg-9 col-sm-12 bg-white px-4 pb-5">
<form [formGroup]="userDetailsForm" #ngForm="ngForm" appDebounceSubmit (debounceSubmit)="submit()" *ngIf="isFormLoaded">
<a class="bst-blue-btn m-3 float-right p-1 icon-color" *ngIf="activeRoute === 'edit'"><img src="assets/images/edit-icon.svg" alt="" /></a>
<div class="row">
<div class="col-md-5 form-group">
<label>First name</label>
<input type="text" class="form-control" formControlName="memberFirstName" placeholder="Type First Name">
<bfv-messages></bfv-messages>
</div>
<div class="col-md-6 form-group">
<label>Last name</label>
<input type="text" class="form-control" formControlName="memberLastName" placeholder="Type Last Name">
<bfv-messages></bfv-messages>
</div>
</div>
<div class="row">
<div class="col-md-3 form-group">
<label>Email</label>
<input type="text" class="form-control" formControlName="memberEmail" placeholder="Type Email"
[readonly]="activeRoute === 'edit'">
<bfv-messages></bfv-messages>
</div>
<div class="col-md-3 form-group">
<label>Mobile phone</label>
<input type="text" class="form-control" formControlName="memberMobileNumber" placeholder="Type Mobile number"
mask='000-000-0000'>
</div>
<div class="col-md-4 form-group">
<label> Timezone</label>
<select class="form-control" formControlName="timezone">
<option value="">Choose your Timezone</option>
<option *ngFor="let tZone of timeZoneList" [ngValue]="tZone.value">{{tZone.zone}}
</option>
</select>
<bfv-messages></bfv-messages>
</div>
</div>
<div class="row" *ngIf="!getFormControl('randomPassword').value">
<div class="col-md-3 form-group">
<label>Password</label>
<input type="password" class="form-control" formControlName="memberPassword" placeholder="Type Password">
<bfv-messages></bfv-messages>
</div>
<div class="col-md-3 form-group">
<label>Confirm Password</label>
<input type="password" class="form-control" formControlName="memberConfirmPassword"
placeholder="Type Confirm Password">
<bfv-messages></bfv-messages>
</div>
</div>
<div class="custom-checkbox mt-2">
<label class="mr-2 radio-cstm" *ngIf="activeRoute !== 'edit'"> Set random password
<input type="checkbox" formControlName="randomPassword" (change)="onRandomPasswordChanged()" />
<span class="checkmark"></span>
</label>
<label class="mr-2 radio-cstm" *ngIf="activeRoute !== 'edit'"> Send activation email
<input type="checkbox" formControlName="sendEmail" />
<span class="checkmark"></span>
</label>
<label class="radio-cstm"> Mark as active
<input type="checkbox" formControlName="isActive" />
<span class="checkmark"></span>
</label>
</div>
<div class="custom-checkbox">
<h5 class="font-weight-bold mt-4">PERMISSIONS</h5>
</div>
<div class="custom-checkbox mt-4">
<div class="row">
<div class="col-md-6 col-lg-3">
<label class="radio-cstm">Select All
<input type="checkbox" formControlName="selectAll" (change)="onSelectAllClicked()" />
<span class="checkmark"></span>
</label></div>
<div class="col-md-6 col-lg-3" [formGroup]="userDetailsForm.controls.skipTracing">
<h6 class="chekListHd">SKIP TRACING</h6>
<label *ngFor="let permission of permission.skipTracing; let i=index;" class="radio-cstm">
{{permission.name}}
<input type="checkbox" formControlName="skipTracing{{i}}" />
<span class="checkmark"></span>
</label>
</div>
<div class="col-md-6 col-lg-3" [formGroup]="userDetailsForm.controls.integrations">
<h6 class="chekListHd">INTEGRATIONS</h6>
<label *ngFor="let integration of permission.integrations; let i=index;" class="radio-cstm">
{{integration.name}}
<input type="checkbox" formControlName="integrations{{i}}" />
<span class="checkmark"></span>
</label>
</div>
<div class="col-md-6 col-lg-3" [formGroup]="userDetailsForm.controls.affiliates">
<h6 class="chekListHd">AFFILIATES</h6>
<label *ngFor="let affiliate of permission.affiliates; let i=index;" class="radio-cstm">
{{affiliate.name}}
<input type="checkbox" formControlName="affiliates{{i}}" />
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<div class="col-md-6 d-flex mt-5">
<app-bst-button isSubmit="true" btnClass="btn-img mr-3">
<img src="../../../../../assets/images/save.svg" alt="" class="mr-3">
SAVE USER
</app-bst-button>
<app-bst-button btnClass="btn bst-white-btn btn-img" routerLink="/app/settings/team">
<span class="close-icon mr-3">×</span> CANCEL
</app-bst-button>
</div>
</form>
</div>
</div>
权限常量
import { Permissions, PermissionType } from '../models/customer.model';
const SKIPTRACING = [
new PermissionType('Place Orders', 'place-orders'),
new PermissionType('View Past Orders', 'view-past-orders'),
];
const AFFILIATES = [new PermissionType('View Affiliates', 'view-affiliates')];
const INTEGRATIONS = [
new PermissionType('Access Integrations', 'access-integrations'),
];
export const PERMISSIONS_LIST = new Permissions(
SKIPTRACING,
AFFILIATES,
INTEGRATIONS
);
解决方案
推荐阅读
- android - 谷歌play计费购买结果在google play计费库中购买成功后显示空列表(原生android)
- php - 致命错误:未捕获的 GuzzleHttp\Exception\ClientException:客户端错误:`POST https://oauth2.googleapis.com/token` 导致 `400
- reactjs - 开玩笑监视导出函数的方法和模拟实现
- google-chrome - 如何在没有开发人员选项的情况下检索 m3u8 流视频 URL
- c# - labstreaminglayer pull_sample() 的问题
- angular - 找不到模块'./声明?
- rtk-query - 使用 invalidatesTags 自动重新获取
- android - Kotlin 中 when 子句的 JUnit 测试
- python - 网络抓取标签未显示在请求响应中
- r - 如何在 R 中旋转成对的列?