Как проверить, что две папки на одном уровне не могут иметь одинаковое имя в рекурсивном массиве формы Angular ⇐ Javascript

[Anonymous]

Я не уверен, что заголовок моего вопроса достаточно ясен, но я постараюсь дать более подробную информацию. Я пытаюсь создать форму иерархии папок, используя угловые формы. Форма может иметь неограниченную вложенность. Моя проблема в том, что теперь я могу добавить 2 папки с одинаковым именем на определенном уровне, но это не должно быть возможно и должно предупредить пользователя. Это логично, поскольку в обычной файловой системе две папки не могут иметь одно и то же имя.
Для ясности я привожу упрощенную версию. все еще немного долго читать, но вот воспроизводимая демонстрация в stackblitz с тем же кодом
компонент формы
@Component({
selector: 'my-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css'],
})
export class FormComponent implements OnInit {
myForm!: FormGroup;
isHierarchyVisible: boolean = false;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
this.myForm = this.formBuilder.group({
folderHierarchy: this.formBuilder.array([]),
});
if (this.folderHierarchy.length === 0) this.isHierarchyVisible = false;
}

removeFolder(index: number): void {
this.folderHierarchy.removeAt(index);
if (this.folderHierarchy.length === 0) this.isHierarchyVisible = false;
}

addFolder(): void {
this.folderHierarchy.push(
this.formBuilder.group({
name: [null, [Validators.required]],
subFolders: this.formBuilder.array([]),
level: 0,
})
);
this.isHierarchyVisible = true;
}

getForm(control: AbstractControl): FormGroup {
return control as FormGroup;
}

get folderHierarchy(): FormArray {
return this.myForm.get('folderHierarchy') as FormArray;
}
}

folder form. type in form name and press enter


create folder


Add

new folder

invalid folder hierarchy











Компонент иерархии форм
@Component({
selector: 'folder-hierarchy',
templateUrl: './folder-hierarchy.component.html',
styleUrls: ['./folder-hierarchy.component.css'],
})
export class FolderHierarchyComponent implements OnInit {
constructor(private formBuilder: FormBuilder) {}
@Output() remove = new EventEmitter();
@Input() folder!: FormGroup;
@Input() index!: number;
tempName: string = '';

ngOnInit() {}

addSubFolder(folder: FormGroup): void {
(folder.get('subFolders') as FormArray).push(
this.formBuilder.group({
name: [null, [Validators.required]],
subFolders: this.formBuilder.array([]),
level: folder.value.level + 1,
})
);
}

getControls(folder: FormGroup): FormGroup[] {
return (folder.get('subFolders') as FormArray).controls as FormGroup[];
}

removeSubFolder(folder: FormGroup, index: number): void {
(folder.get('subFolders') as FormArray).removeAt(index);
}

removeFolder(folder: { value: { subFolders: string | any[] } }): void {
this.remove.emit(folder);
}

disableAdd(folder: { invalid: any }): void {
return this.folder.invalid || folder.invalid;
}
onKeyup(event: KeyboardEvent): void {
this.tempName = (event.target as HTMLInputElement).value;
}
updateName(folder: FormGroup, name: string): void {
folder.get('name')?.setValue(name);
if (this.isInvalid(folder)) {
folder.get('name')?.updateValueAndValidity();
return;
}
}

isInvalid(folder: FormGroup): boolean {
return !folder.get('name')?.valid;
}
}




Name:


Remove
Add Subfolder

0" class="subfolder-container">







Подробнее здесь: https://stackoverflow.com/questions/793 ... -name-in-a