How to use fields with the same validation in two components?

Question

JavaScript

I want to optimize my application to not use the same validation fields in two components. I use the validation of the "title" and "url" fields in the "GalleryAddComponent" component (when I add an item) and the same fields to validate "title" and "url" in the "GalleryItemComponent" component (when I edit a single item). In the components, only the buttons in the form are different, in "GalleryAddComponent" there is an "add" button that calls the method to add an item, and in the "GalleryItemComponent" component, there is an "updatePost" button that saves changes to the item. I understand that the fields should be moved to a separate component that will be called in component forms: "GalleryAddComponent" and "GalleryItemComponent". But when I did this, validation didn't work for me, and there was an error that FormBuilder was undefined. Tell me please,
GalleryAddComponent.html:

<h3>Add new product</h3>
<div class="card">
    <div class="card-body">
        <form [formGroup]="angForm" novalidate>
            <div class="form-group">
                <label class="col-md-4">Picture Title</label>
                <input type="text" class="form-control" formControlName="title" minlength="1" #title/>
            </div>
            <div *ngIf="angForm.controls['title'].invalid && (angForm.controls['title'].dirty || angForm.controls['title'].touched)"
                 class="alert alert-danger">
                <div *ngIf="angForm.controls['title'].errors.required">
                    Title is required.
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4">Picture Address (url)</label>
                <input type="url" class="form-control" formControlName="url" #url pattern="https?://.+"
                       title="Include http://"/>
            </div>
            <div *ngIf="angForm.controls['url'].invalid && (angForm.controls['url'].dirty || angForm.controls['url'].touched)"
                 class="alert alert-danger">
                Address(url) is required.
                <div *ngIf="angForm.controls['url'].errors.required ">

                </div>
            </div>
            <div class="form-group but-group">
                <button (click)="addPost(title.value, url.value);  angForm.reset(title.value, url.value)"
                        [disabled]="angForm.pristine || angForm.invalid"
                        class="btn btn-primary">Add
                </button>
                <a routerLink="/gallery" class="btn btn-danger">Back</a>
            </div>
        </form>
    </div>
</div>

GalleryAddComponent.ts

export class GalleryAddComponent {
    angForm: FormGroup;
    isAdded: boolean = false;

    constructor(private fb: FormBuilder, private galleryService: GalleryService) {
        this.createForm();
    }

    createForm(): void {
        this.angForm = this.fb.group({
            title: ['', Validators.required],
            url: ['', Validators.required]
        });
    }

    addPost(title: string, url: string): void {
        this.galleryService.add(title, url).subscribe(res => {
            this.isAdded = true;
        });
    }
}

GalleryItemComponent.html

<h4>Edit your post</h4>
        <div class="card-body">
            <form [formGroup]="angFormEd" novalidate>
                <div class="form-group">
                    <label class="col-md-4">Picture Title</label>
                    <input type="text" class="form-control" formControlName="titleEd" #titleEd
                    />
                </div>
                <div *ngIf="angFormEd.controls['titleEd'].invalid && (angFormEd.controls['titleEd'].dirty || angFormEd.controls['titleEd'].touched)"
                     class="alert alert-danger">
                    <div *ngIf="angFormEd.controls['titleEd'].errors.required">
                        Title is required.
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4">Picture Address (url)</label>
                    <input type="url" class="form-control" formControlName="urlEd" #urlEd pattern="https?://.+"
                           title="Include http://"/>
                </div>
                <div *ngIf="angFormEd.controls['urlEd'].invalid && (angFormEd.controls['urlEd'].dirty || angFormEd.controls['urlEd'].touched)"
                     class="alert alert-danger">
                    Address(url) is required.
                    <div *ngIf="angFormEd.controls['urlEd'].errors.required ">

                    </div>
                </div>
                <div class="form-group but-group">
                    <input type="button"
                           (click)="updatePost(titleEd.value, urlEd.value)"
                           [disabled]=" angFormEd.invalid"
                           class="btn btn-primary" value="Update Post">
                </div>
            </form>
        </div>

GalleryItemComponent.ts

export class GalleryItemComponent implements OnInit {
   pic: Picture;
   angFormEd: FormGroup;

     constructor( private route: ActivatedRoute, private galleryService: GalleryService, private fb: FormBuilder,) {

    }

    ngOnInit() {
        this.createFormEd();
        this.showPost();
    }

    createFormEd(): void {
        this.angFormEd = this.fb.group({
            titleEd: ['', Validators.required],
            urlEd: ['', Validators.required]
        });
    }

    showPost(): void {
        this.route.data.subscribe(params => {
            this.pic = params.post;
            this.angFormEd.setValue({titleEd: params.post.title, urlEd: params.post.url});
        })
    }
    updatePost(title: string, url: string): void {
        this.route.params.subscribe(params => {
            this.galleryService.update(title, url, params['id']).subscribe(res => {
                if (res.id === this.pic.id) {
                    this.pic.title = title;
                    this.pic.url = url;
                } 
            });
        });
    }
}