Question

我正在尝试为我的一个Angular 4.X应用程序添加一个签名板，以便我可以允许用户使用触摸输入进行签名。为此我使用从npm下载的angular2-signature-pad包。我想使用签名板作为我的表单控件之一，以便我可以在提交表单时获取签名字段的值（以及我的表单的其他表单控件）。所有其他字段工作正常，但是当我将一个formcontrol名称分配给签名板时，它会抛出以下错误。

No value accessor for form control with name: 'Signature'

我为这个问题创建了一个plunker。请在下面找到链接 - https://plnkr.co/edit/32nEL74I48dDDWermSWQ?p=preview

为方便参考，下面是我创建的签名板的代码。

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms';
import { SignaturePadModule } from 'angular2-signature-pad';

@Component({
  selector: 'SignatureForm',
  template: `
            <div>  
              <form [formGroup]="signatureForm" (ngSubmit)="OnSubmit(signatureForm.value)">
                  <div>
                      <input type="text" class="form-control" placeholder="First Name" formControlName="FirstName"/>
                          <small *ngIf="IsValidField('FirstName')" class="text-danger">
                              First Name is required
                          </small>
                      <input type="text" class="form-control" placeholder="First Name" formControlName="LastName"/>
                          <small *ngIf="IsValidField('LastName')" class="text-danger">
                              Last Name is required
                          </small>
                      <signature-pad (onSave)="onSaveHandler($event)" (onClear)="onClearHandler()" [width]="width" [height]="height" [hideFooter]="noFooter" [label]="label" formControlName="Signature"></signature-pad>
                  </div>
                  <button type="submit" class="btn btn-primary">Save</button>
              </form>
            </div>
  `,
})
export class SignatureFormComponent {
  constructor(private formBuilder: FormBuilder) {}

  public signatureForm: FormGroup;
  public width:number = 300;
  public height:number = 300;
  public noFooter:boolean = false;
  public label:string = 'Sign above';
  public formSubmitAttempt:boolean;

  ngOnInit() {
      this.signatureForm = this.formBuilder.group({
        FirstName: ['',[Validators.required,Validators.maxLength(25)]],
        LastName: ['',[Validators.maxLength(25)]],
        Signature:[null,[Validators.required]]
      });
  }

  public OnSubmit(signatureFormData: any) {
    this.formSubmitAttempt=false;
    console.log(JSON.stringify(signatureFormData));
  }

  onSaveHandler(data) {
    console.log(data);
  }

  onClearHandler() {
    console.log('On Clear click');
  }

  public IsValidField(field: string,i?:number) {
    return (this.signatureForm.get(field).invalid && this.signatureForm.get(field).touched) || (this.signatureForm.get(field).invalid && this.formSubmitAttempt);
  }

}

@NgModule({
  imports: [ BrowserModule, FormsModule,ReactiveFormsModule,SignaturePadModule],
  declarations: [ SignatureFormComponent ],
  bootstrap: [ SignatureFormComponent ]
})
export class AppModule {}

我需要它作为表单控件的原因是因为我想保存签名，以便当我希望在某处显示表单时，我将轻松获取签名值并将其分配回formcontrol。任何帮助将受到高度赞赏。任何帮助将不胜感激。

角度2签名板

0 个答案: