单击 MatFormFieldControl 中的按钮触发 Angular 4 中表单上的提交操作答案

【问题标题】：Click on a button in a MatFormFieldControl trigger the Submit action on Form in Angular 4单击 MatFormFieldControl 中的按钮触发 Angular 4 中表单上的提交操作
【发布时间】：2018-04-30 14:18:38
【问题描述】：

我开发了一个自定义组件 (app-mat-avatar) 用作头像选择（见图）。它由一个带有图片和 2 个按钮的大 div 组成。一个用于编辑，另一个用于擦除。我按照 Creating a custom form field control 的 Angular 指南构建了它

这是我使用它的形式：

<form name="detailsForm" [formGroup]="detailsForm" (submit)="submitDetails($event)">
    <app-mat-avatar [size]="150" formControlName="photoURL"></app-mat-avatar>
    <input matInput type="email" placeholder="Email" formControlNamesss="email" disabled value="{{detailsForm.get('email').value}}">
.....

    <div flex layout="row" layout-align="end center" class="fullWidth pad-right-sm">
        <button mat-button mat-raised (click)="resetDetails()" class="push-right-xs" [disabled]="busy">Reset</button>
        <button type="submit" mat-button mat-raised-button color="primary" [disabled]="detailsForm.invalid || busy">Save</button>
    </div>
</form>

而这是支持表单所在页面组件的代码：

@Component({
  selector: 'app-my-info',
  templateUrl: './my-info.component.html',
  styleUrls: ['./my-info.component.sass']
})
export class MyInfoComponent implements OnInit, OnDestroy {

  detailsForm = new FormGroup({
    uid: new FormControl(''),
    photoURL: new FormControl(''),
    firstName: new FormControl('', [Validators.required, Validators.minLength(2)]),
    lastName: new FormControl('', [Validators.required, Validators.minLength(2)]),
    sex: new FormControl('', [Validators.required]),
    email: new FormControl('', [Validators.required, Validators.email]),
    licenseLocal: new FormControl(''),
    licenseNational: new FormControl(''),
    cellPhone: new FormControl(''),
  });

........

  ngOnInit() {
    fetchUserFromDatabase.subscribe( me => {
      if (!me) {return; }
      this._currentUser = me;      
      this.resetDetails();

    }));
  }

  resetDetails() {
    const user = {
      email : this.currentUserCopy.email,
      photoURL: this.currentUserCopy.photoURL,
      firstName: this.currentUserCopy.firstName,
      lastName: this.currentUserCopy.lastName,
      licenseLocal: this.currentUserCopy.licenseLocal || '',
      licenseNational: this.currentUserCopy.licenseNational || '',
      sex: this.currentUserCopy.sex,
      cellPhone: this.currentUserCopy.cellPhone || ''
    };
    this.detailsForm.patchValue( user );
  }


  submitDetails(event) {
    // console.log(event);
    this._currentUser.createFromFirebaseData(this.detailsForm.value);
    this._db.UpdateUser(this._currentUser)
    .then( result => {
      this.busy = false;
      this._popUp.showInfo('Perfil guardado');
    })
    .catch( error => {
      this.busy = false;
      this._popUp.showError(error);
    });
  }
}

一切正常，除了当我点击 app-mat-avatar 组件的按钮之一时，submitDetails 方法被触发。

我尝试将event.stopPropagation();添加为按钮单击调用的方法的第一行，但没有效果。

知道为什么会发生这种情况吗？

【问题讨论】：

标签： angular angular4-forms

【解决方案1】：

将type="button"添加到模板中的重置按钮以防止提交

【讨论】：

这实际上没有用，但是......这是一个很好的提示！我将type="button" 放在自定义组件（app-mat-avata）的两个按钮上，这一次，它成功了！！非常感谢@Sonicd300！顺便说一句，您愿意详细说明一下它起作用的原因吗？
我没有确切的答案，但多次遇到问题，似乎当你不指定它认为是提交按钮的类型时

【解决方案2】：

如下设置type="reset"，

<button mat-button mat-raised type="reset" (click)="resetDetails()" class="push-right-xs" [disabled]="busy">Reset</button>

【讨论】：