MatFormFieldControlのボタンをクリックすると、フォーム4の送信アクションがトリガされます。

Question

アバター選択（写真参照）として使用するカスタムコンポーネント（アプリ - マット - アバター）を開発しました。これは、1つの大きなdivと画像と2つのボタンで構成されています。 1つは編集し、もう1つは消去します。 私はこれは私がそれを使用する形式であるCreating a custom form field control

での角度ガイド以下にそれを建て：

<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コンポーネントのボタンの1つをクリックすると、submitDetailsメソッドがトリガされます。

ボタンクリックが呼び出すメソッドの最初の行にevent.stopPropagation();を追加しようとしましたが、効果がありません。

なぜこれが起こっているのでしょうか？

Answer 1

は実際に動作しますが、...それは偉大なヒントしていなかった提出