Angular 2 - 具有来自不同组件的自定义输入的表单

Question

我正在使用模板驱动构建 angular 2 表单，并尝试重新使用我制作的自定义输入。

所以我有一个看起来像这样的主要组件：

<form (ngSubmit)="onSubmit(f.value)" #f="ngForm">

        <custom-input></custom-input>

        <button class="btn btn-submit" [ngClass]="{disabled : !f.valid} ">Sign In</button>
    </form>

问题是 UI 工作正常，输入验证也有效，但是自定义输入并不是表单的真正成员，所以我可以在我的 onSubmit() 方法中使用它的值。输入无效时也无法将表单设置为无效

我的自定义输入代码如下所示：

自定义-component.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'custom-input',
  templateUrl: './custom-component.component.html',
  styleUrls: ['./custom-component.component.scss']
})
export class CustomComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

而 html 看起来像这样：

  <div class="input-div">
  <input ngModel name="email" placeholder="Email" type="email" #email="ngModel" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?">
  <span class="v" *ngIf="email.valid && email.touched"> 
                    &#10004;
                      </span>
  <span class="down-placeholder errormsg" *ngIf="!email.valid && email.touched && email.errors.required"> Please enter your email.  </span>
  <span class="down-placeholder errormsg" *ngIf="!email.valid && email.touched && email.errors.pattern"> Please enter a valid email. </span>
</div>

感谢您的帮助！

Answer 1

我想这篇文章就是你要找的：

How to Build Nested Model-driven Forms in Angular 2

有一个关于 FormGroup 和 FormBuilder 的示例应该可以解决您的问题。

Answer 2

您需要制作组件 ControlValueAccessor。

本文可能对您有所帮助：

https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

祝你好运！

Angular 2 - 具有来自不同组件的自定义输入的表单

Angular 2 - Forms with custom inputs that coming from different components

angular2-forms

angular