Skip to content

Commit 26f8724

Browse files
rohit2sharma95rohit2sharma95
committed
🔨 Remove unwanted content
1 parent 4ff2134 commit 26f8724

File tree

5 files changed

+3
-217
lines changed

5 files changed

+3
-217
lines changed

‎src/app/app.component.html‎

Lines changed: 0 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +0,0 @@
1-
<div class="container">
2-
<div class="bg-light border p-3 rounded">
3-
<h5 class="font-weight-bold text-center">Main Form</h5>
4-
<hr />
5-
<form [formGroup]="mainForm">
6-
<div class="card-columns">
7-
<ng-container formArrayName="modules">
8-
<ng-template ngFor let-module [ngForOf]="modules.controls">
9-
<ng-container [formGroup]="module">
10-
<div class="card">
11-
<div class="card-header font-weight-bold text-capitalize">
12-
<div class="custom-control custom-checkbox">
13-
<input type="checkbox" class="custom-control-input" formControlName="isChecked" [id]="module.get('name').value">
14-
<label class="custom-control-label" [for]="module.get('name').value">{{module.get('name').value}}</label>
15-
</div>
16-
</div>
17-
<ng-container formArrayName="subModules">
18-
<ul class="list-group list-group-flush">
19-
<ng-template ngFor let-subModule [ngForOf]="module.controls.subModules.controls">
20-
<ng-container [formGroup]="subModule">
21-
<li class="list-group-item">
22-
<span>{{subModule.get('name').value}}</span>
23-
<hr class="my-2" />
24-
<div class="custom-control custom-checkbox">
25-
<input type="checkbox" class="custom-control-input" formControlName="read" [id]="'customCheckRead' + module.get('name').value">
26-
<label class="custom-control-label" [for]="'customCheckRead' + module.get('name').value">Read</label>
27-
</div>
28-
<div class="custom-control custom-checkbox">
29-
<input type="checkbox" class="custom-control-input" formControlName="write" [id]="'customCheckWrite' + module.get('name').value">
30-
<label class="custom-control-label" [for]="'customCheckWrite' + module.get('name').value">Write</label>
31-
</div>
32-
<div class="custom-control custom-checkbox">
33-
<input type="checkbox" class="custom-control-input" formControlName="delete" [id]="'customCheckDelete' + module.get('name').value">
34-
<label class="custom-control-label" [for]="'customCheckDelete' + module.get('name').value">Delete</label>
35-
</div>
36-
<div class="custom-control custom-checkbox">
37-
<input type="checkbox" class="custom-control-input" formControlName="create" [id]="'customCheckCreate' + module.get('name').value">
38-
<label class="custom-control-label" [for]="'customCheckCreate' + module.get('name').value">Create</label>
39-
</div>
40-
<div class="custom-control custom-checkbox">
41-
<input type="checkbox" class="custom-control-input" formControlName="import" [id]="'customCheckImport' + module.get('name').value">
42-
<label class="custom-control-label" [for]="'customCheckImport' + module.get('name').value">Import</label>
43-
</div>
44-
<div class="custom-control custom-checkbox">
45-
<input type="checkbox" class="custom-control-input" formControlName="export" [id]="'customCheckExport' + module.get('name').value">
46-
<label class="custom-control-label" [for]="'customCheckExport' + module.get('name').value">Export</label>
47-
</div>
48-
</li>
49-
</ng-container>
50-
</ng-template>
51-
</ul>
52-
</ng-container>
53-
</div>
54-
</ng-container>
55-
</ng-template>
56-
</ng-container>
57-
</div>
58-
</form>
59-
</div>
60-
</div>

‎src/app/app.component.ts‎

Lines changed: 2 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,7 @@
11
import { Component, OnInit, OnDestroy } from '@angular/core';
2-
import { FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';
3-
import { MainService } from './services/main.service';
4-
import { takeWhile } from 'rxjs/operators';
52

63
@Component({
74
selector: 'app-root',
8-
templateUrl: './app.component.html',
9-
styleUrls: ['./app.component.scss']
5+
templateUrl: './app.component.html'
106
})
11-
export class AppComponent implements OnInit, OnDestroy {
12-
13-
mainForm: FormGroup;
14-
alive: boolean;
15-
16-
constructor(
17-
private _FormBuilder: FormBuilder,
18-
private _MainService: MainService
19-
) {
20-
this.mainForm = this._FormBuilder.group({
21-
modules: this._FormBuilder.array([])
22-
});
23-
this.alive = true;
24-
}
25-
26-
ngOnInit() {
27-
this._MainService.getData().pipe(takeWhile(() => this.alive)).subscribe({
28-
next: data => {
29-
if (data && data.modules) {
30-
data.modules.forEach(module => {
31-
this.modules.push(this.generateModule(module));
32-
});
33-
}
34-
}
35-
});
36-
}
37-
38-
ngOnDestroy() {
39-
this.alive = false;
40-
}
41-
42-
get modules(): FormArray {
43-
return this.mainForm.get('modules') as FormArray;
44-
}
45-
46-
generateModule(module: any) {
47-
const generateSubModules = (subModules) => {
48-
const formArray = this._FormBuilder.array([]);
49-
subModules.forEach(val => {
50-
formArray.push(this._FormBuilder.group({
51-
id: [val.id, [Validators.required]],
52-
name: [val.name, Validators.required],
53-
read: [val.read || false],
54-
write: [val.write || false],
55-
delete: [val.delete || false],
56-
create: [val.create || false],
57-
export: [val.export || false],
58-
import: [val.import || false]
59-
}));
60-
});
61-
formArray.disable();
62-
return formArray;
63-
};
64-
65-
const control = this._FormBuilder.group({
66-
id: [module.id, [Validators.required]],
67-
name: [module.name, [Validators.required]],
68-
isChecked: [false],
69-
subModules: generateSubModules(module.subModules)
70-
});
71-
this.toggleInnerStatus(control);
72-
return control;
73-
}
74-
75-
toggleInnerStatus(control: FormGroup) {
76-
control.get('isChecked').valueChanges.subscribe({
77-
next: value => {
78-
value === true ? control.get('subModules').enable() : control.get('subModules').disable();
79-
}
80-
});
81-
}
82-
83-
}
7+
export class AppComponent { }

‎src/app/app.module.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
33

44
import { AppComponent } from './app.component';
55
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
6-
import { HttpClientModule } from '@angular/common/http';
76

87
@NgModule({
98
declarations: [
@@ -12,10 +11,8 @@ import { HttpClientModule } from '@angular/common/http';
1211
imports: [
1312
BrowserModule,
1413
FormsModule,
15-
ReactiveFormsModule,
16-
HttpClientModule
14+
ReactiveFormsModule
1715
],
18-
providers: [],
1916
bootstrap: [AppComponent]
2017
})
2118
export class AppModule { }

‎src/app/services/main.service.ts‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/assets/data/data.json‎

Lines changed: 0 additions & 56 deletions
This file was deleted.

0 commit comments

Comments
 (0)