Question

我想优化我的应用程序，以免在两个组件中使用相同的验证字段。我使用字段来检查组件"title"中的"url"和"GalleryAddComponent"（添加元素时），并使用相同的字段来检查组件中的"title"和"url"组件"GalleryItemComponent"（当我编辑组件时）。在组件中，只有形式上的按钮不同，在"GalleryAddComponent"中，有一个按钮“ add”调用添加元素的方法，而在组件"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

如果只需要创建一个可重用的验证器，请编写一个Directive来进行验证。这样，您只需将属性添加到输入中，就可以将验证器附加到任何表单字段。

但是如果您想创建一个包含整个表单的可重用组件...

我建议的第一件事是使用表单包含的字段创建一个接口。这可以帮助您轻松地在组件之间传递数据。

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

然后，您必须创建一个子组件，其中包含表单以及“提交”按钮。该组件的作用是从用户那里获得输入，对其进行验证，如果确定可以，则将其发送回父组件，该父组件可以是AddComponent或EditComponent。父组件决定如何处理此数据。如果是Edit页，则父组件应首先获取先前的数据，然后将其传递给子组件，以填写表格。按钮标签也可以从父母传递给孩子。

您可以选择多种组件交互方式。如果您不熟悉组件之间的数据传递，强烈建议您阅读Angular docs，尤其是Component Interaction部分。

sample code on stackblitz

Answer 2

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

in html you can have something like

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

This is not tested or a working code, I have removed few lines of code to make it look simpler and clearer. You don't have to introduce this line in your 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>

All styling will be taken care by "error_msg" class applied on host, if dere is an error. Plus the message will be shown just below the input field.

Note: I have just copy pasted my code and removed few things, understand the idea and implement it based on your requirement

如何在两个组件中使用相同的验证字段？

2 个答案: