Question

我是棱角分明的初学者，我可能需要一些帮助。首先，我将展示它是如何工作的，然后我将写下我希望它如何工作。

这是使用ngModel时的常规方法：

    <form>
      <input name="name" placeholder="name" [(ngModel)]="model.name" value="" />
      <select name="select" [(ngModel)]="model.select">
         <option value="1">..</option>
         ...
      </select>
      <input type="button" value=" click me" />
    </form>

如果你不想选择自己的外观，那就足够了。我的目标是为此创建一个组件，我可以创建div和其他内容，我可以设计这些内容以适应此表单元素的未来显示。另一方面，我想保持ngModel的舒适度。所以模板应该在我的目标中看起来像这样：

    <form>
      <input name="name" placeholder="name" [(ngModel)]="model.name" value="" />
      <app-select label="label" name="select" [placeholder]="'placeholder'" [(ngModel)]="select" [options]="options"></app-select >
      <input type="button" value=" click me" />
    </form>

我已经尝试创造这样的东西，但我失败了，可悲的是:( 那些有更多经验的人可以帮助我吗？提前感谢您的时间和答案！

我可以在这里重新创建一些最小的东西：https://stackblitz.com/

Answer 1

以下是我在表单中执行此操作的方法（请记住，我使用表单生成器的反应表单，而不是使用ngModel的模板驱动表单）：

首先，我在名为forms的目录中创建了一个自定义FormModule。

下一步，里面有各种表单组件。我们以LoginFormComponent为例。

以下是LoginFormComponent：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'login-form',
    templateUrl: './login-form.component.html'
})
export class LoginFormComponent implements OnInit {
    @Output() onChange: EventEmitter<FormGroup> = new EventEmitter();

    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            email: [null, Validators.email],
            password: [null, [Validators.required, Validators.minLength(6), Validators.maxLength(60)]]
        });

        this.form.valueChanges.subscribe(() => this.onChange.emit(this.form));
    }

    ngOnInit() {
        this.onChange.emit(this.form);
    }
}

这是HTML：

<form autocomplete="off" [formGroup]="form">
    <div class="form-group">
        <label for="username">Email *</label>
        <input type="text" id="username" class="form-control" placeholder="Enter your email address" formControlName="email" autofocus>
        <control-messages [control]="form.get('email')"></control-messages>
    </div>

    <label for="password">Password *</label>
    <input type="password" id="password" class="form-control" placeholder="Enter your password" formControlName="password">
    <control-messages [control]="form.get('password')" [label]="'Password'"></control-messages>
</form>

现在，在导入FormModule的模块中的任何自定义组件中，我可以执行以下操作：

<强> app.component.html：

<login-form (onChange)="form = $event"></login-form>

<button (click)="submit()">Submit</button>

<强> app.component.ts：

@Component({...})
export class AppComponent {
    form: FormGroup;

    submit() {
        // Do something with `this.form`.
    }
}

这种设计的好处可能不会立即显而易见，但它使我们能够做一些事情：

首先，只要我们导入自定义login-form，我们就可以在应用中的任意位置重复使用FormModule组件。如果我们更改它，它将自动更新到任何地方。保持干燥。
接下来，我们可能不希望每个地方都有相同的提交按钮/文本，我们可能希望它在不同的位置执行不同的操作，因此login-form组件仅包含表单本身，并且任何提交逻辑都是在其外部处理以获得重用能力。当您拥有用于创建和编辑的表单时，这很重要。编辑按钮可以保存数据，而创建按钮可以创建新内容。如果您将提交按钮放在表单组件中，则此重用并不容易实现。

对于稍微复杂的表单，比如一个可以接受一些默认值的表单，请看一下这个示例TagFormComponent：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { Tag } from 'shared';

@Component({
    selector: 'tag-form',
    templateUrl: './tag-form.component.html'
})
export class TagFormComponent implements OnInit {
    @Output() onChange: EventEmitter<FormGroup> = new EventEmitter();

    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: [null, Validators.email]
        });

        this.form.valueChanges.subscribe(() => {
            this.onChange.emit(this.form);
        });
    }

    @Input()
    set tag(tag: Tag) {
        if (tag) {
            this.form.patchValue(tag);
        }
    }

    ngOnInit() {
        this.onChange.emit(this.form);
    }
}

这个概念遵循与LoginFormComponent相同的一般概念，除了这个概念可以为表单传递一些默认值。像这样：

<tag-form [tag]="tag" (onChange)="form = $event"></tag-form>

角4自己的形式元素组成部分

1 个答案: