Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 84x 84x 6x 6x 6x 6x 6x 6x 7x 6x 6x 37x 6x 6x 4x 6x 6x 3x 6x 6x 6x 10x 8x 8x 8x 1x 7x 7x 2x 2x 2x | import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, Input, OnInit } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { UntypedFormControl, UntypedFormGroup, ValidatorFn } from '@angular/forms';
import { FormlyFieldConfig, FormlyForm, FormlyFormOptions } from '@ngx-formly/core';
import { AdminService } from '../../service/admin.service';
/**
* Formly editor for a JSON string form control.
*/
@Component({
selector: 'app-admin-config',
templateUrl: './admin-config.component.html',
styleUrls: ['./admin-config.component.scss'],
host: { 'class': 'nested-form admin-config' },
changeDetection: ChangeDetectionStrategy.Eager,
imports: [FormlyForm],
})
export class AdminConfigComponent implements OnInit {
private destroyRef = inject(DestroyRef);
@Input()
group!: UntypedFormGroup;
@Input()
fieldName = 'config';
@Input()
fields: FormlyFieldConfig[] = [];
form = new UntypedFormGroup({});
model: any = {};
options: FormlyFormOptions = {
formState: {
admin: this.admin,
config: this.model,
},
};
private json?: string;
private formValidator: ValidatorFn = () => this.form.invalid ? { adminForm: true } : null;
constructor(
public admin: AdminService,
private cd: ChangeDetectorRef,
) { }
get control() {
return this.group.get(this.fieldName) as UntypedFormControl;
}
ngOnInit() {
this.readJson(this.control.value);
this.control.valueChanges.pipe(
takeUntilDestroyed(this.destroyRef),
).subscribe(value => this.readJson(value));
this.control.addValidators(this.formValidator);
this.form.statusChanges.pipe(
takeUntilDestroyed(this.destroyRef),
).subscribe(() => this.control.updateValueAndValidity({ emitEvent: false }));
this.destroyRef.onDestroy(() => {
this.control.removeValidators(this.formValidator);
this.control.updateValueAndValidity({ emitEvent: false });
});
}
private readJson(value?: string) {
if (value === this.json) return;
this.json = value;
try {
this.model = value ? JSON.parse(value) : {};
} catch (e) {
// Keep the last valid model while the JSON is being edited
return;
}
this.options.formState.config = this.model;
this.cd.markForCheck();
}
modelChange(model: any) {
this.json = JSON.stringify(model, null, 2);
this.control.setValue(this.json);
this.control.markAsDirty();
}
}
|