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 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 68x 68x 68x 68x 9x 9x 9x 9x 9x 8x 8x 8x 8x 86x | import { Component, HostBinding, Input } from '@angular/core';
import {
FormBuilder,
ReactiveFormsModule,
UntypedFormArray,
UntypedFormBuilder,
UntypedFormGroup,
Validators
} from '@angular/forms';
import { FormlyForm } from '@ngx-formly/core';
import { map } from 'lodash-es';
import { URI_REGEX } from '../../util/format';
@Component({
selector: 'app-links',
templateUrl: './links.component.html',
styleUrls: ['./links.component.scss'],
imports: [ReactiveFormsModule, FormlyForm]
})
export class LinksFormComponent {
static validators = [Validators.pattern(URI_REGEX)];
@HostBinding('class') css = 'form-group';
@Input()
group?: UntypedFormGroup;
@Input()
fieldName = 'links';
model: string[] = [];
field = {
type: 'refs',
props: {
showLabel: true,
label: $localize`Sources: `,
showAdd: true,
addText: $localize`+ Add another source`,
},
fieldArray: {
focus: false,
props: {
label: $localize`🔗️`,
}
},
};
constructor(
private fb: FormBuilder,
) { }
@Input()
set emoji(value: string) {
this.field.fieldArray.props.label = value;
}
@Input()
set label(value: string) {
this.field.props.label = value;
}
@Input()
set showLabel(value: boolean) {
this.field.props.showLabel = value;
}
@Input()
set add(value: string) {
this.field.props.addText = value;
}
@Input()
set showAdd(value: boolean) {
this.field.props.showAdd = value;
}
get links() {
return this.group?.get(this.fieldName) as UntypedFormArray | undefined;
}
setLinks(values: string[]) {
this.model = values;
if (!this.links) return;
while (this.links.length > values.length) this.links.removeAt(this.links.length - 1, { emitEvent: false });
while (this.links.length < values.length) this.links.push(this.fb.control(''), { emitEvent: false });
this.links.setValue(values);
}
addLink(...values: string[]) {
if (!values.length) return;
this.model = this.links!.value;
this.field.fieldArray.focus = true;
for (const value of values) {
if (value) this.field.fieldArray.focus = false;
if (value && value !== 'placeholder' && this.model.includes(value)) return;
this.model.push(value);
}
}
removeLink(index: number) {
if (!this.links) return;
this.links.removeAt(index);
}
}
export function linksForm(fb: UntypedFormBuilder, urls: string[]) {
return fb.array(map(urls, v => fb.control(v, LinksFormComponent.validators)));
}
|