Question

我有一个组件Angular包含我的所有表单的页眉和页脚：

 <div class="layout vertical">
  <header class="layout horizontal center">
    <h2> {{enterData?.title}} </h2>   
  </header>

  <!-- Form -->
  <form [formGroup]="formName" #form="ngForm" (ngSubmit)="submit()"
        class="layout vertical">
   <ng-content></ng-content>

  </form>

  <footer class="layout space-between horizontal">    
    <div class="buttons-footer-layout">
      <!-- buttons -->
      <paper-button class="btn-cancel-alt" type="reset" (click)="close()" id="cancelInc">{{labels.BTN_ANNULER}}
      </paper-button>
      <paper-button class="btn-action"
                    [disabled]="!formName.valid || formName.pristine
                    (click)="submit()"
                    id="saveInc">
        {{labels.BTN_CREER}}
      </paper-button>
    </div>
  </footer>
</div>

和TS文件：

    @Component({
      selector: 'enter-data-container',
      templateUrl: './enter-data-container.component.html',
      styleUrls: ['./enter-data-container.component.scss']
    })
    export class EnterDataContainerComponent {
  @Input() enterData: EnterData<any>;
  @Input() formName: FormGroup;

    constructor(private store: Store<AppState>,
                  private  location: Location) {
      }
    /**
       * On submit du form
       */
      submit() {
     // Send Data to service

    }
    /**
       * on click cancel
       */
      close(): void {    
          this.location.back();    
      }
    }

我在我的应用程序中有许多形式，提交始终是相同的，但有时，它略有不同。所以我想在需要时提供覆盖提交功能的可能性。如何使用Angular 2/4实现这一目标？

Answer 1

使用$ event.preventDefault（）

<paper-button class="btn-cancel-alt" type="reset" (click)="close(); $event.preventDefault()" id="cancelInc">{{labels.BTN_ANNULER}}
      </paper-button>

自定义方法在表单组件容器中提交

1 个答案: