Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="row">
- <div class="col-12">
- <form [formGroup]="ipRangeForm">
- <div formArrayName="ipRanges">
- <div *ngFor="let ranges of ipRangeForms.controls; let i=index" [formGroupName]="i">
- <div class="row mb-lg">
- <div class="col-6">
- <mat-card>
- <div class="row">
- <div class="col-5">
- <mat-form-field style="width: 100%;">
- <label>
- <input matInput placeholder="{{ getTranslateKey('startRange.label') | translate }}" value="" formControlName="startingRange">
- </label>
- <mat-error *ngIf="ranges.get('startRange').invalid">
- <p>IP address is not valid.</p>
- </mat-error>
- </mat-form-field>
- </div>
- <div class="col-5">
- <mat-form-field style="width: 100%;">
- <label>
- <input matInput placeholder="{{ getTranslateKey('endRange.label') | translate }}" value="" formControlName="endingRange">
- </label>
- <mat-error *ngIf="ranges.get('endRange').invalid">
- <p>IP address is not valid.</p>
- </mat-error>
- </mat-form-field>
- </div>
- <div class="col-2 remove-column">
- <button swui-core-button (click)="deleteRange(i)" class="mr-sm pd-zero"
- color="secondary" buttonStyle="link">
- {{ getTranslateKey('remove') | translate }}
- </button>
- </div>
- </div>
- </mat-card>
- </div>
- </div>
- </div>
- </div>
- </form>
- </div>
- </div>
- export class SettingsComponent extends AbstractPageComponent implements OnInit {
- ipRestrictionEnabled: boolean;
- ipRangeForm: FormGroup;
- constructor(
- baseService: PageService, private formBuilder: FormBuilder, private settingsService: SettingsService
- ) {
- super(baseService);
- }
- ngOnInit() {
- // this.ipRestrictionEnabled = false;
- this.ipRangeForm = this.formBuilder.group(
- {
- ipRanges: this.formBuilder.array([])
- }
- );
- const stream = this.settingsService.getSettings();
- stream.subscribe(val => {
- this.ipRestrictionEnabled = val.ipRestrictionEnabled;
- for (const i of val.ipRanges) {
- console.log(i.startRange, i.endRange);
- this.addSpecifiedRange(i.startRange, i.endRange);
- }
- });
- }
- toggleIpRestriction(): void {
- this.ipRestrictionEnabled = !this.ipRestrictionEnabled;
- }
- get ipRangeForms() {
- return this.ipRangeForm.get('ipRanges') as FormArray;
- }
- addRange() {
- const ipRange = this.formBuilder.group({
- startingRange: ['',
- [
- Validators.required,
- // tslint:disable-next-line:max-line-length
- Validators.pattern('^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])$')
- ]
- ],
- endingRange: ['',
- [
- Validators.required,
- // tslint:disable-next-line:max-line-length
- Validators.pattern('^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])$')
- ]
- ]
- });
- this.ipRangeForms.push(ipRange);
- }
- addSpecifiedRange(startRange: string, endRange: string) {
- const ipRange = this.formBuilder.group({
- startingRange: [startRange,
- [
- Validators.required,
- // tslint:disable-next-line:max-line-length
- Validators.pattern('^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])$')
- ]
- ],
- endingRange: [endRange,
- [
- Validators.required,
- // tslint:disable-next-line:max-line-length
- Validators.pattern('^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])$')
- ]
- ]
- });
- this.ipRangeForms.push(ipRange);
- }
- deleteRange(index) {
- this.ipRangeForms.removeAt(index);
- }
- submitIpRanges() {
- console.log(this.ipRangeForms.getRawValue());
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement