Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- export class SettingsComponent implements OnInit, OnDestroy {
- ipRangeForm: FormGroup;
- constructor(
- private formBuilder: FormBuilder, private settingsService: SettingsService
- ) {
- super(baseService);
- }
- ngOnInit() {
- 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);
- console.log(this.ipRangeForm);
- this.addSpecifiedRange(i.startRange, i.endRange);
- this.ipRangeForm.controls['ipRanges'].get('startingRange').setValue(i.startRange); //This doesn't update anything, it actu
- }
- });
- }
- getPageConfig() {
- return {
- pageKey: 'settings',
- displaySidebar: true,
- displayToolbar: true,
- backButtonRoute: ''
- };
- }
- get ipRangeForms() {
- return this.ipRangeForm.get('ipRanges') as FormArray;
- }
- addSpecifiedRange(startRange: string, endRange: string) {
- const ipRange = this.formBuilder.group({
- startingRange: [startRange],
- endingRange: [endRange]
- });
- this.ipRangeForms.push(ipRange);
- console.log(this.ipRangeForms.getRawValue());
- }
- }
- <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 value="" formControlName="startingRange"> <!-- These Inputs do not update to display the data held inside the form array -->
- </label>
- </mat-form-field>
- </div>
- <div class="col-5">
- <mat-form-field style="width: 100%;">
- <label>
- <input matInput value="" formControlName="endingRange"> <!-- These Inputs do not update to display the data held inside the form array -->
- </label>
- </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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement