Как использовать одни и те же поля проверки в двух компонентах?

Question

Я хочу оптимизировать свое приложение, чтобы не использовать одни и те же поля проверки в двух компонентах.Я использую поля для проверки "title" и "url" в компоненте "GalleryAddComponent" (когда я добавляю элемент) и те же поля для проверки "title" и "url" в компоненте "GalleryItemComponent" (когда я редактируюсоставная часть).В компонентах отличаются только кнопки в форме, в "GalleryAddComponent" есть кнопка «добавить», которая вызывает метод добавления элемента, а в компоненте "GalleryItemComponent" кнопка «updatePost», которая сохраняет изменения в элементе..

Я понимаю, что поля необходимо перенести в отдельный компонент и связать в виде компонентов: "GalleryAddComponent" и "GalleryItemComponent".Но как это сделать правильно, чтобы сохранить проверки кнопок и их логику.Помогите пожалуйста разобраться, как реализовать эту идею и можете ли вы подать пример в «StackBlitz».

Ссылка на структуру моего проекта: StackBlitz

шаблон GalleryAddComponent:

<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:

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:

        <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:

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;
                } 
            });
        });
    }
}

Answer 1

import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { FormGroup, FormControl, FormArray, AbstractControl } from '@angular/forms'

@Component({
    selector: 'control-error-message',
    host: {
        '[class.error_msg]': 'showErrorMessage'
    },
    template: `<span *ngIf="showErrorMessage">{{displayMessage}}</span>`
})
export class ErrorMessageComponent {

    @Input() control: FormControl;

    errorMessage: string;
    displayMessage: string;
    showErrorMessage: boolean = false;

    constructor() { }

    ngOnChanges(change: SimpleChanges) {

        if (this.control) {
            this.control.valueChanges.subscribe(
                (res) => {
                    this.setErrorMessage(this.control);
                }
            )
        }
    }

    getControlName(c: AbstractControl): string | null {
        const formGroup = c.parent.controls;
        return Object.keys(formGroup).find(name => c === formGroup[name]) || null;
    }

    setErrorMessage(control: FormControl) {
        this.errorMessage = "";
        if (control.errors) {
            for (let propertyName in control.errors) {
                if (propertyName.toLowerCase() == "required") {
                    this.displayMessage = this.getControlName(control) + " field is required";
                    this.showErrorMessage = true;
                }
            }
        }
    }
}

в html у вас может быть что-то вроде

<form [formGroup]="angFormEd" novalidate>
<div class="form-group">
     <label class="col-md-4">Picture Title</label>
     <input type="text" class="form-control" formControlName="title" minlength="1" #title/>
     <control-error-message [control]="formGroupObject.get('title')"></control-error-message>
</div>

Это не проверенный или рабочий код, я удалил несколько строк кода, чтобы он выглядел проще и понятнее.Вам не нужно вводить эту строку в html:

<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>

Все стили будут обрабатываться классом error_msg, применяемым на хосте, если dere - ошибка.Кроме того, сообщение будет отображаться прямо под полем ввода.

Примечание: я только что скопировал, вставил свой код и удалил несколько вещей, понял идею и реализовал ее в соответствии с вашим требованием

Answer 2

Если вам просто нужно создать повторно используемый валидатор, напишите директиву , которая выполняет валидацию.Таким образом, вы можете присоединить валидатор к любому полю формы, просто добавив атрибут к входным данным.

Но если вы хотите создать повторно используемый компонент, содержащий всю форму ...

Первое, что я рекомендую, это создать интерфейс с полями, которые содержит ваша форма.Это поможет вам легко передавать данные между компонентами.

export interface GalleryItem {
  title: string;
  url: string;
}

Затем необходимо создать дочерний компонент, содержащий вашу форму вместе с кнопкой отправки.Роль этого компонента состоит в том, чтобы получать входные данные от пользователя, проверять их и, если все в порядке, отправлять их обратно в родительский компонент, который может быть AddComponent или EditComponent.Родительский компонент решает, что делать с этими данными.Если это страница Edit, родительский компонент должен сначала извлечь предыдущие данные и передать их дочернему компоненту, чтобы заполнить форму.Ярлыки кнопок также можно передавать от родителя к потомку.

Существует множество способов взаимодействия компонентов, которые вы можете выбрать.Если вы не знакомы с передачей данных между компонентами, я настоятельно рекомендую вам прочитать Angular Docs , особенно раздел Взаимодействие с компонентами .

примеркод на стеке