How to use one component for validation other two components?

Question

I have three components: GalleryAddComponent to add a new element, GalleryItemComponent, to edit an element, FieldsComponent, the form I want to use in the components: GalleryAddComponent and GalleryItemComponent. All components are inside the GalleryComponent. But when I go to the component GalleryAddComponent to add a new element I get the error: ERROR TypeError: Cannot read property 'controls' of undefined. Also in the component: GalleryItemComponent.

Help solve this problem so that the editing and adding logic works correctly.

template of GalleryAddComponent

<div class="card">
    <div class="card-body">
        <form [formGroup]="angForm" novalidate>
                <app-fields [formGroup]="angForm"></app-fields>
            <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="/" class="btn btn-danger">Back</a>
            </div>
        </form>
    </div>
</div>

code of GalleryAddComponent

export class GalleryAddComponent implements OnInit {
    angForm: FormGroup;
    isAdded: boolean = false;
    constructor(private fb: FormBuilder, private galleryService: GalleryService) {}

    ngOnInit() {
        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;
        });
    }
}

template of GalleryItemComponent

    <div class="card" *ngIf="toggleEdit">
        <h4>Edit your post</h4>
        <div class="card-body">
            <form [formGroup]="angForm" novalidate>
                <app-fields [formGroup]="angForm"></app-fields>
                <div class="form-group but-group">
                    <input type="button"
                           (click)="updatePost(title.value, url.value)"
                           [disabled]=" angForm.invalid"
                           class="btn btn-primary" value="Update Post">
                </div>
            </form>
        </div>
    </div>

code of GalleryItemComponent

export class GalleryItemComponent implements OnInit {
   pic: Picture;
   angForm: FormGroup;
   
    constructor(private route: ActivatedRoute,
    private galleryService: GalleryService, private fb: FormBuilder) {}

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

    showPost(): void {
        this.route.params.subscribe(params => {
            this.galleryService.getPicture(params['id']).subscribe(res => {
                this.pic = res;
                this.angForm.setValue({title: res.title, url: res.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;
                } 
            });
        });
    }
}

template of FieldsComponent

<div [formGroup]="formGroup">
    <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>

code of FieldsComponent

export class FieldsComponent implements OnInit {
@Input() formGroup: FormGroup;

  constructor() {}

  ngOnInit() {}

}

Answer 1

You are getting this error because you are referencing angForms.controls in your FieldsComponent which only has one variable: formGroup.

Simply replace angForms in the template HTML code with formGroup and the issue should be resolved.

<div [formGroup]="formGroup">
  <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="formGroup.controls['title'].invalid && (formGroup.controls['title'].dirty || formGroup.controls['title'].touched)"
    class="alert alert-danger">
    <div *ngIf="formGroup.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="formGroup.controls['url'].invalid && (formGroup.controls['url'].dirty || formGroup.controls['url'].touched)"
    class="alert alert-danger">
    Address(url) is required.
    <div *ngIf="formGroup.controls['url'].errors.required ">

    </div>
  </div>
</div>