相关疑难解决方法(0)

Angular - 以编程方式提交表单.

我在HTML上有一个表单组,我希望组件使用post方法中的电子邮件字段提交表单的操作.而不是使用正常的提交按钮.

下面的testMethod从另一个按钮调用.在这个方法中,我想发布testForm.它必须以旧学校的方式发布,因为它需要一个动作.

这是我的HTML:

  <form
    [formGroup]="testGroup"
    [action]='actionLink'
    method='POST'
    #testForm>
     <input name='Email' type='hidden' [value]='currentUserEmail'>
  </form>

这是我的Component TS文件尝试:

  @ViewChild('testForm') testFormElement;

  public currentUserEmail: string = '';
  public testGroup = this.formBuilder.group({
    Email: ''
  });


  public testMethod(): void {

      // Below: This currently doesnt seem to do anything.
      this.testFormElement.ngSubmit.emit();
  }

我正试图通过标签外的按钮提交我的被动表格.以前,这个表单是模板驱动的,我可以这样做:

<button (click)="f.ngSubmit.emit()"></button>

如果'f'是表格名称.

但是如果我使用这种模型驱动器形式的方法,则会显示错误:

TypeError: Cannot read property 'emit' of undefined

我可以模拟这种行为在表单内部编写隐藏按钮并为外部按钮设置click事件:

<form [formGroup]="loginForm" (ngSubmit)="login()">
   ...
   <button #submit type="submit" style="visibility:hidden"></button>
</form>

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

它似乎不是最好的方法......还有另一种更好的方法吗？

谢谢.

编辑:

如果我在表单中添加一个id字段,但我认为这不是最好的方法...

<form id="loginF" [formGroup]="loginForm" (ngSubmit)="login()">
   ...
</form>

<button form="loginF" (click)="submit.click"></button>

我正在 Angular2 - Redux 中构建一个向导。我正在使用 Reactive Forms 来处理和提交内部每一步的数据。我需要以编程方式触发表单验证，因为为了进入下一步，我的号召性用语按钮的声明位于与 stepComponent 分开的组件中。请参阅下面的线框

组件的线框

当前行为

1. 只有当表单控件发生更改时，它自己的验证才会运行。它的touched & valid属性会相应地更新。

2. 由于我在 Redux 环境中，因此我调度了一个操作来获取当前步骤表单数据，以便应用于有效负载。完成后，我触发另一个操作来保存数据。

3. 实际上，我通过使用以下方法知道表单何时有效或无效：

    submitForm(form: FormGroup):void{
       if(form.valid){
         this.actionsStep.saveStep(form.value);
       }else{
         console.log('Form invalid ')
       }
     }
   

   Run Code Online (Sandbox Code Playgroud)

4. 由于我的表单使用控件的属性在发生错误时呈现自定义消息，因此我想通过提交表单或使用另一个函数来重新运行验证，以便能够再次使用控件的属性来通知发生错误的位置。

StepComponent.ts : 表单声明

this.stepForm = this.formBuilder.group({
  name: ['', Validators.required],
  email: ['', Validators.required]
});

step-component.html : 表单 HTML

<form id="ngForm" [formGroup]="stepForm" (ngSubmit)="submitForm(stepForm.value)" class="form-horizontal form-box-content">
    <div class="form-group row" [ngClass]="{'has-danger' :name.invalid && name.touched}">
      <label class="col-md-2 col-form-label">Name:</label>
      <div class="col-md-10">
        <input 
        name="titulo" class="form-control required" 
               formControlName="name" placeholder="" type="text"  [ngClass]="{'form-control-danger' :name.invalid && name.touched}" > …

在Angular 1(1.5)中,表单控制器有一个$setSubmitted()方法,允许您以编程方式将.$submitted标志设置为true.

我如何通过NgForm对象在2中执行此操作？我不想使用模板,也就是说(ngSubmit)="".

我试过了<formname>.ngSubmit.emit(),但它没有设置.submitted为真.

我想知道是否有任何方法来设置值并更新表单控件的有效性.鉴于以下内容:

this.updateForm = this._formBuilder.group({
    user: ['',Validators.required]     
});

我有一些关于更改触发器的指令,触发以下内容:

changeUserSelection(value){
    this.updateForm.controls['user'].value = value // doesnt trigger validation?
}

我想知道如何设置值,并触发此字段的验证.按照我的方式这样做,不会触发验证.

谢谢