代码之家  ›  专栏  ›  技术社区  ›  Sampgun

角度5 ngSubmit@Output开火两次

  •  0
  • Sampgun  · 技术社区  · 6 年前

    自定义组件

    // ...
    
    @Output() submit: EventEmitter < any > = new EventEmitter();
    
    // ...
    
    onFilterSubmit($event): void {
      this.submit.emit($event);
      this.formData = {
        minDate: new Date().toISOString(),
        maxDate: new Date().toISOString()
      };
    }
    <form (ngSubmit)="onFilterSubmit(formData)">
    
        <!-- -- -->
        <button mat-button
            mat-raised-button
            [disabled]="reqsForm.form.invalid" 
            type="submit"
            color="primary">
            {{labels.submit}}
        </button>
    </form>

    外部组件

    // ...
    
    onFilterSubmit($event): void {
      console.info("FORM SUBMIT", $event);
    }
    <custom-component (submit)="onFilterSubmit($event)">
    
      <!-- -- -->
    
    </custom-component>

    FORM SUBMIT > Object

    表单提交>对象

    1 回复  |  直到 6 年前
        1
  •  5
  •   Sampgun    6 年前

    发生这种情况的原因是一个名为“提交”的事件 已经可以从外面捕捉到了 .

    过滤器提交

    type submit 在这个用例中,这个按钮实际上是无用的,因为默认情况下 表单中的按钮将是submit类型。