我想使用相同的角度对话框形式进行添加和编辑。请帮我 ：） 我的Component.html，单击2即可添加编辑表单：
<div class="piece-demande-content section-container mb-4 pt-3 container">
<!--header-->
<div class="card-header libelle-color-piece-jointe">
<div class="row">
<div class="col-lg-6 max-with-100">
<div class="row" [ngClass]="{'active':activateItemForLateralMenu===Anchors.LISTE_PIECES_DEMANDEES}">
<div class="col-lg-1">
<span class="icon logo-piece-demandee"></span>
</div>
<div class="col-lg-11"><h4 class="section-title text-uppercase">{{'pieceDemande.titre'|translate}}</h4></div>
</div>
</div>
<div class="col-lg-6 text-right">
<button mat-stroked-button type="submit" (click)="openDialog()">
<mat-icon class="blue-theme example-icon logo-piece-add" svgIcon="logo-piece-add"></mat-icon>
{{'pieceDemande.btn-ajoutPiece'|translate}}
</button>
</div>
</div>
</div>
<!--Fin header-->
<div class="row mb-3">
<div class="col-12">
<table class="mat-table">
<thead>
<tr class="mat-row no-border">
<th class="mat-header-cell ">{{'pieceDemande.piece'|translate}}</th>
<th class="mat-header-cell text-center">{{'pieceDemande.dateDemande'|translate}}</th>
<th class="mat-header-cell text-center">{{'pieceDemande.dateReception'|translate}}</th>
<th class="mat-header-cell text-center">{{'pieceDemande.observation'|translate}}</th>
<th class="mat-header-cell text-center">{{'common.edition'|translate}}</th>
<th class="mat-header-cell text-center">{{'common.suppression'|translate}}</th>
</tr>
</thead>
<tbody>
<tr class="mat-row no-border" *ngFor="let element of dossier.demandesPieces">
<td class="mat-cell "> {{element.libelle}} </td>
<td class="mat-cell text-center"> {{element.dateDemande}} </td>
<td class="mat-cell text-center"> {{element.dateReception}} </td>
<td class="mat-cell text-center"> {{element.observations}} </td>
<td class="mat-cell mat-column-edition">
<mat-icon class="blue-theme example-icon logo-detail-edit" svgIcon="logo-detail-edit" (click)="openDialog()"></mat-icon>
</td>
<td class="mat-cell mat-column-suppression">
<mat-icon class="blue-theme example-icon logo-piece-delete" svgIcon="logo-piece-delete" (click)="onClickDeletePiece(element.id)"></mat-icon>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
-Component.ts：
@Component({
selector: 'app-piece-demande',
templateUrl: './piece-demande.component.html',
styleUrls: ['./piece-demande.component.scss']
})
export class PieceDemandeComponent implements OnInit {
public isFormDisplayed: boolean = false;
// Accéder à l'énum dans la vue
Anchors = Anchors;
date = new Date();
// Dialog attributs
animal: string;
name: string;
// Anchor Menu latéral activé
activateItemForLateralMenu: string;
@ViewChild(MatPaginator) paginator: MatPaginator;
private dossier: DossierDto;
constructor(
private readonly iconRegistry: MatIconRegistry,
private readonly dossierComponent: DossierComponent,
private readonly sanitizer: DomSanitizer,
private readonly activatedRoute: ActivatedRoute,
private readonly dossierMetierService: DossierMetierService,
private readonly translateService: TranslateService,
private readonly snacbackService: SnacbackService,
private readonly formBuilder: FormBuilder,
private readonly dialog: MatDialog) {
iconRegistry.addSvgIcon(
'logo-piece-jointe',
sanitizer.bypassSecurityTrustResourceUrl('./assets/images/icons/logo-piece-jointe.svg'));
iconRegistry.addSvgIcon(
'logo-piece-add',
sanitizer.bypassSecurityTrustResourceUrl('./assets/images/icons/logo-piece-add.svg'));
iconRegistry.addSvgIcon(
'logo-piece-delete',
sanitizer.bypassSecurityTrustResourceUrl('./assets/images/icons/logo-piece-delete.svg'));
iconRegistry.addSvgIcon(
'logo-detail-edit',
sanitizer.bypassSecurityTrustResourceUrl('./assets/images/icons/logo-detail-edit.svg'));
iconRegistry.addSvgIcon(
'logo-check',
sanitizer.bypassSecurityTrustResourceUrl('./assets/images/icons/logo-check.svg'));
}
ngOnInit() {
this.dossier = this.dossierComponent.dossier;
uiStore.subscribe((evt) => {
this.activateItemForLateralMenu = evt.activatedItemForLateralMenu;
});
}
/*
Open dialog method
*/
openDialog(): void {
const dossier = this.dossier;
const dialogRef = this.dialog.open(AppDialogPieceDemandeViewComponent, {
width: '500px',
disableClose: true,
panelClass: 'sciven-dialog-style',
data: {dossier}
});
dialogRef.afterClosed().subscribe(result => {
this.animal = result;
console.log('result', result);
});
}
/**
* Au click sur la suppression d'un utilisateur
* @param id
*/
onClickDeletePiece(id: number) {
//Ouverture d'une pop-up de de demande de confirmation de suppression
const confirmSuppressionDialog = this.dialog.open(DialogConfirmViewComponent, {
panelClass: 'sciven-dialog-style',
disableClose: true,
data: {dialogText: 'common.confirm-suppression', confirmText: 'oui', cancelText: 'non'}
});
confirmSuppressionDialog.afterClosed().subscribe(result => {
//Confirmation de la supppression
if (result === 'true') {
let params: RemovePieceDemandeeParams = {
idDemandePiece: id,
idDossier: this.dossier.id
};
this.dossierMetierService.deletePiece(params);
this.snacbackService.add(this.translateService.instant('common.success-suppression', {}));
} else {
this.snacbackService.add(this.translateService.instant('common.echec-suppression', {}));
}
});
}
}
export interface DialogData {
dossier: DossierDto;
}
-DialogComponent.html：
<div class="sciven-dialog-style">
<div mat-dialog-actions class="mat-dialog-action">
<mat-icon class="red-theme logo-piece-delete" svgIcon="logo-piece-delete" (click)="onNoClick()"></mat-icon>
</div>
<div class="title-container mb-3">
<span class="icon logo-piece-demandee"></span>
<span class="sciven-popin-title-weight text-uppercase">{{'pieceDemande.dialogTitre'|translate}}</span>
</div>
<form [formGroup]="pieceDemandeForm" (ngSubmit)="onSubmitForm()">
<div mat-dialog-content>
<mat-form-field class="sciven-mat-form-field">
<mat-select formControlName="typePiece" placeholder="{{'pieceDemande.dialogType-piece'|translate}}" required>
<mat-option *ngFor="let piece of listTypePiece" [value]="piece.id">{{piece.libelle}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="sciven-mat-form-field sciven-mat-form-field-width">
<input matInput [matDatepicker]="dateDemande" placeholder="{{'pieceDemande.dialogDate-demande'|translate}}" formControlName="dateDemande" required>
<mat-datepicker-toggle matSuffix [for]="dateDemande"></mat-datepicker-toggle>
<mat-datepicker #dateDemande></mat-datepicker>
</mat-form-field>
<mat-form-field class="sciven-mat-form-field sciven-mat-form-field-width">
<input matInput [matDatepicker]="dateReception" placeholder="{{'pieceDemande.dialogDate-reception'|translate}}" formControlName="dateReception">
<mat-datepicker-toggle matSuffix [for]="dateReception"></mat-datepicker-toggle>
<mat-datepicker #dateReception></mat-datepicker>
</mat-form-field>
<mat-form-field class="sciven-mat-form-field">
<textarea matInput placeholder="{{'pieceDemande.observation'|translate}}" formControlName="observations"></textarea>
</mat-form-field>
</div>
<div mat-dialog-actions class="sciven-mat-dialog-action-right">
<button mat-stroked-button type="submit"
class="sciven-matdialog-action-color validate-icon">{{'common.valide'|translate}}
</button>
</div>
</form>
</div>
-DialogComponent.ts：
@Component({
selector: 'app-dialog-piece-demande-view',
templateUrl: 'dialog-piece-demande-view.html'
})
export class AppDialogPieceDemandeViewComponent implements OnInit {
// FMode édition formulaire 'CREATION' ou 'EDITION'
pieceDemandeForm: FormGroup;
listTypePiece: PieceDemandeeDto[];
private dossier: DossierDto;
private create: boolean = false;
constructor(
private readonly formBuilder: FormBuilder,
private readonly piecesDemandeeService: PiecesDemandeeService,
private readonly dossierMetierService: DossierMetierService,
private readonly snacbackService: SnacbackService,
private readonly translateService: TranslateService,
public dialogRef: MatDialogRef<AppDialogPieceDemandeViewComponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) {
this.dossier = data.dossier;
this.create = data.create;
this.pieceDemandeForm = formBuilder.group({
dateDemande: ['', Validators.required],
dateReception: [''],
typePiece: ['', Validators.required],
observations: ['', Validators.maxLength(300)]
});
}
ngOnInit() {
this.piecesDemandeeService.getPiecesDemandee().subscribe(listTypePiece => this.listTypePiece = listTypePiece
);
}
onSubmitForm() {
let newdemandePiece = this.convertFormTopieceDemandeDto();
let params: AddPieceDemandeeParams = {
pieceDemandee: newdemandePiece,
iddossier: this.dossier.id
};
this.dossierMetierService.addNewPiece(params).subscribe((result) => {
this.dialogRef.close();
this.dossier.demandesPieces.push(result);
this.snacbackService.add(this.translateService.instant('common.success-add'));
}, (error) => {
this.snacbackService.add(this.translateService.instant('common.echec-add'));
}
);
}
/**
* Conversion Formulaire
*/
convertFormTopieceDemandeDto(): DemandePieceDto {
let demandePiece = new DemandePieceUpdate();
let form = this.pieceDemandeForm.value;
demandePiece.dateDemande = form.dateDemande;
demandePiece.dateReception = form.dateReception;
demandePiece.observations = form.observations;
demandePiece.idPieceDemandee = form.typePiece;
return demandePiece;
}
onNoClick(): void {
this.dialogRef.close();
}
}
我已经在使用从背面调用的方法实现add函数。我想用相同的对话框来实现版本