Angular 角2签名板

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

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

我为这个问题创造了一个机会。请找到下面的链接--

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

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

从'@angular/core'导入{Component，NgModule}
从“@angular/platform browser”导入{BrowserModule}
从'@angular/forms'导入{FormsModule，ReactiveFormsModule}；
从“@angular/forms”导入{FormBuilder、FormGroup、Validators、FormArray、FormControl}；
从“angular2签名板”导入{SignaturePadModule}；
@组成部分({
选择器：“SignatureForm”，
模板：`
名字是必需的
姓是必需的
拯救
`,
})
导出类SignatureFormComponent{
构造函数（私有formBuilder:formBuilder）{}
公共签名形式：FormGroup；
公共宽度：数字=300；
公众高度：数字=300；
public noFooter:boolean=false；
公共标签：字符串='上面的符号'；
public formSubmitTest：布尔值；
恩戈尼尼特（）{
this.signatureForm=this.formBuilder.group({
名字：[''，[Validators.required，Validators.maxLength（25）]，
LastName:[''[Validators.maxLength（25）]，
签名：[null，[验证器.必需]]
});
}
公开提交（签名格式数据：任意）{
this.formsubmittest=false；
log（JSON.stringify（signatureFormData））；
}
onSaveHandler（数据）{
控制台日志（数据）；
}
onClearHandler（）{
log（'On Clear click'）；
}
公共IsValidField（字段：字符串，i？：编号）{
return（this.signatureForm.get（field.invalid&&this.signatureForm.get（field.toucted）| |（this.signatureForm.get（field.invalid&&this.formsubmitt）；
}
}
@NGD模块({
导入：[浏览器模块、表单模块、反应表单模块、签名模块]，
声明：[SignatureFormComponent]，
引导：[SignatureFormComponent]
})
导出类AppModule{}

我之所以需要它作为表单控件，是因为我想保存签名，以便当我希望在某处显示表单时，可以轻松地获取签名值并将其分配回表单控件。任何帮助都将不胜感激。

---

如果有任何帮助，我们将不胜感激。

您必须编写表单控制组件并将签名板放入其中，以便它能够使用ngModel或formControlName@amit：嘿，老兄，你找到问题的解决方案了吗？你必须编写表单控制组件，并将签名板放入其中，才能使其生效NGOR模型formControlName@amit：嘿，伙计，你有没有找到解决问题的办法？