我开发了一个自定义组件(app-mat-avatar)用作头像选择(见图片)。它由一个带图片和2个按钮的大div组成。一个要编辑,另一个要擦除。我是按照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组件的一个按钮时,触发了submitDetails
方法。
我试图添加event.stopPropagation();
作为按钮单击调用的方法的第一行,但它没有任何效果。
知道为什么会发生这种情况吗?
将type="button"
添加到模板中的重置按钮以阻止提交
设置type="reset"
如下,
<button mat-button mat-raised type="reset" (click)="resetDetails()" class="push-right-xs" [disabled]="busy">Reset</button>