Я не уверен, что заголовок моего вопроса достаточно ясен, но я постараюсь дать более подробную информацию. Я пытаюсь создать форму иерархии папок, используя угловые формы. Форма может иметь неограниченную вложенность. Моя проблема в том, что теперь я могу добавить 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
