Reactive Form Locks Up

I’m trying to create a complex form that uses child components for part of the forms; however, when I try to use patchValue or setValue on a ReactiveForm property that’s NOT the editor, my browser just locks up. There’s something creating an infinite loop or something like it.

Parent Component

public ngOnInit(): void {

        this._form = this.formBuilder.group( { updateOn: 'blur' } );

        this.subscription = this.form.valueChanges.subscribe( ( newData: any ) => console.dir( newData ) );

    }

Editor Component (Child One):

public ngOnInit(): void {
        const excerptValidators: Array<Validators> = [ Validators.required, Validators.minLength( 1 ), Validators.maxLength( this.maxLength ) ];
        this.parent.form.addControl( 'writing', this.formBuilder.group( { excerpt: [ '', { validators: excerptValidators, updateOn: 'blur' } ] } ) );
    }

Sibling Component (Child Two):

constructor(
        private formBuilder: FormBuilder,
        @Host() private parent: FormGroupDirective
    ) { }

    public ngOnInit(): void {
        this.parent.form.addControl( 'source', this.formBuilder.group( { type: [ '', { validators: [ Validators.required ], updateOn: 'blur' } ] } ) );
    }

    public ngAfterContentInit(): void {
        this.parent.form.get( 'source' ).patchValue( { type: Source.Book } );
    }

[KerickHowlett]

I think I understand what you’re saying. (It’s super late here, because I’m up way too late programming again, so I’m having to read what you said ten times to just comprehend half of it. XD )

Although, I was thinking I should restructure my form, anyway. For some different reasons than the ones you listed, but if I understand you correctly, you also bring up some valid points.

I had tried to use Inputs and Outputs in the beginning, but that didn’t work out. If I recall correctly, I kept running into problems like infinite loops and the form not updating onBlur. I’ll figure it out, though.

Before that person enlightened me, I would over complicate everything — making everything into an intermingled mess of spaghetti code and tightly meshed smart components. I’m trying to learn from my mistakes and not go down that road again. :p

[KillerCodeMonkey]

oookay…

in general if i can give you a hint.

remove everything that is not needed in first place -> just a formgroup with form controls + quill editor. so even the custom toolbar of the editor or validators are not really interesting, so something really simple should be the result. 1 module, 1 parent component, 2 child components.