D-Net
/
dnet-applications
16
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

dynamic form

This commit is contained in:
Michele Artini 2023-02-02 12:32:55 +01:00
parent e620975813
commit f776c2ca68
2 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontends/dnet-is-application/src/app/dsm/dsm-add-api.dialog.html
View File

@ -10,7 +10,7 @@
<mat-error *ngIf="addApiForm.get('protocol')?.invalid">This field is <strong>required</strong></mat-error>
</mat-form-field>
<mat-card style="margin-top: 10px;" *ngIf="addApiForm.get('protocol')?.value">
<mat-card style="margin-top: 10px;" *ngIf="selectedProtocol">
<mat-card-header>
<mat-card-title>API Description</mat-card-title>
</mat-card-header>
@ -27,7 +27,7 @@
<mat-form-field appearance="fill" floatLabel="always" style="width: 70%;">
<mat-label>Api ID (suffix)</mat-label>
<input matInput formControlName="apiId" required placeholder="example: {{addApiForm.get('protocol')?.value}}_01" />
<input matInput formControlName="apiId" required placeholder="example: {{selectedProtocol}}_01" />
<mat-error *ngIf="addApiForm.get('apiId')?.invalid">This field is <strong>required</strong></mat-error>
</mat-form-field>
@ -49,7 +49,7 @@
</mat-card-content>
</mat-card>
<mat-card style="margin-top: 10px;" *ngIf="addApiForm.get('protocol')?.value">
<mat-card style="margin-top: 10px;" *ngIf="selectedProtocol">
<mat-card-header>
<mat-card-title>Configuration Parameters</mat-card-title>
</mat-card-header>
@ -61,8 +61,9 @@
</mat-form-field>
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;" *ngFor="let p of selProtParams">
<mat-label>Protocol: {{addApiForm.get('protocol')?.value}} - Parameter: {{p.name}}</mat-label>
<input matInput required />
<mat-label>Protocol: {{selectedProtocol}} - Parameter: {{p.label}}</mat-label>
<input matInput [formControlName]="paramPrefix + p.name" required />
<mat-error *ngIf="addApiForm.get(paramPrefix + p.name)?.invalid">Invalid value</mat-error>
</mat-form-field>
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">

43
frontends/dnet-is-application/src/app/dsm/dsm.component.ts
View File

@ -8,7 +8,7 @@ import { MatSort } from '@angular/material/sort';
import { combineLatest } from 'rxjs';
import { Router } from '@angular/router';
import { PageEvent } from '@angular/material/paginator';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MatSelectChange } from '@angular/material/select';
@Component({
@ -162,27 +162,27 @@ export class DsmBrowseDialog implements OnInit {
styleUrls: ['./dsm.component.css']
})
export class DsmAddApiDialog {
selectedProtocol:string = '';
apiPrefix:string = '';
apiIdControl = new FormControl('');
addApiForm = new FormGroup({
apiId: this.apiIdControl,
compatibility : new FormControl(''),
contentdescription : new FormControl(''),
protocol : new FormControl(''),
baseurl : new FormControl(''),
metadataIdentifierPath : new FormControl('')
});
protocols:string[] = [];
compatibilityLevels:string[] = [];
contentDescTypes:string[] = [];
protocolsMap:any = {};
selProtParams:ProtocolParam[] = [];
paramPrefix:string = '__PARAM_';
apiIdControl = new FormControl('', [Validators.required]);
addApiForm:FormGroup = new FormGroup({
apiId: this.apiIdControl,
compatibility : new FormControl(''),
contentdescription : new FormControl(''),
protocol : new FormControl(''),
baseurl : new FormControl(''),
metadataIdentifierPath : new FormControl('')
});
constructor(public dialogRef: MatDialogRef<DsmAddApiDialog>, @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
this.apiPrefix = 'api_________::' + data.dsId + '::';
@ -197,20 +197,27 @@ export class DsmAddApiDialog {
}
onChangeProtocol(e:MatSelectChange):void {
this.selectedProtocol = e.value;
Object.keys(this.addApiForm.controls).forEach(k => {
if (k.startsWith(this.paramPrefix)) {
this.addApiForm.removeControl(k);
}
});
if (this.protocolsMap[e.value]) {
this.selProtParams = this.protocolsMap[e.value];
this.selProtParams.forEach(p => this.addApiForm.addControl(this.paramPrefix + p.name, new FormControl('')));
} else {
this.selProtParams = this.protocolsMap[e.value];
this.selProtParams = [];
}
}
onSubmit():void {
//const api = DsmAddApiDialog.value;
//const api = this.addApiForm.value;
//api.apiId = this.apiPrefix + api.apiId; IMPORTANT
//this.service.dsmAddApi(api, (data: void) => this.dialogRef.close(1), this.metadataForm);
console.log(this.addApiForm.value);
}
onNoClick(): void {