Question

我正在使用模板驱动构建角度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 - 具有来自不同组件的自定义输入的表单

2 个答案: