Как отключить радиобатчу на всех уровнях в рекурсивном компоненте угловой формы на основе значения определенного уровня ⇐ Javascript

[Anonymous]

Это своего рода продолжение улучшенной версии старого моего вопроса

, поэтому в основном у меня есть рекурсивная угловая форма, и я использую для управления иерархией папок. Каждая папка имеет радиопроизводительную кнопку для выбора между exclusive и регулярной . любой уровень. (в основном 1 эксклюзивная папка в иерархии папок) Возможно ли это сделать с помощью @Input () или есть лучший подход. Все еще немного долго прочитать, но здесь воспроизводимая демонстрация в StackBlitz с тем же кодом
Компонент формы

Код: Выделить всё

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators, AbstractControl } from '@angular/forms';
import { duplicateFolderName } from '../validators/duplicate-folder-name.validator';

@Component({
selector: 'my-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css'],
})
export class FormComponent implements OnInit {
myForm!: FormGroup;
isHierarchyVisible = false;

constructor(private fb: FormBuilder) {}

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

addFolder() {
this.folderHierarchy.push(
this.fb.group({
name: [null, [Validators.required, duplicateFolderName()], { updateOn: 'blur' }],
isExclusive: false,
subFolders: this.fb.array([]),
level: 0,
})
);
this.isHierarchyVisible = true;
}

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

get folderHierarchy() { return this.myForm.get('folderHierarchy') as FormArray; }
getForm(control: AbstractControl) { return control as FormGroup; }
}

< /code>
folder form.  type in form name and press enter


create folder 

Add
new folder

invalid folder hierarchy

компонент папки-иерархии

Код: Выделить всё

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { duplicateFolderName } from '../validators/duplicate-folder-name.validator';

@Component({
selector: 'folder-hierarchy',
templateUrl: './folder-hierarchy.component.html',
styleUrls: ['./folder-hierarchy.component.css'],
})
export class FolderHierarchyComponent {
@Output() remove = new EventEmitter();
@Input() folder!: FormGroup;
@Input() index!: number;
@Input() parentDirectory?: FormGroup;

constructor(private fb: FormBuilder) {}

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

updateIsExclusive(folder: FormGroup, value: Event, isExclusive: boolean): void {
folder.get('isExclusive')?.setValue(isExclusive ? (value.target as HTMLInputElement).checked : !(value.target as HTMLInputElement).checked);
}

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

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

removeFolder(folder: FormGroup): void { this.remove.emit(folder); }

disableAdd(folder: FormGroup): boolean { return this.folder.invalid || folder.invalid; }

get nameControl(): FormControl { return this.folder.get('name') as FormControl; }
}

< /code>



Name:




Exclusive


Regular


Remove
Add Subfolder

0" class="subfolder-container">




Name is required.
Name already exists

Справка очень ценится


Подробнее здесь: https://stackoverflow.com/questions/797 ... -component