debugging autocomplete for reactive form type

src/main/webapp/app/rsc-tree/rsc-tree.component.html

@@ -6,54 +6,91 @@
     <button mat-raised-button color="primary"><mat-icon>help</mat-icon><span>Help</span></button>
   </div>
   <!--IMPORTANTE: BINDING FATTO SU CONTEXT_ID -->
-  <div id="form-container" class="col-md-9 mt-2">
-    VALUE:...{{ contextInput.value }}
-    <form [formGroup]="myForm">
-      <mat-form-field>
-        <mat-label class="ml-4 flex-grow-1">Select Context</mat-label>
-        <input #contextInput (keyup)="(0)" matInput placeholder="Context" [matAutocomplete]="auto" [formControl]="contextCtrl" required />
+
+  <div class="col-md-9 mt-2">
+    <form [formGroup]="chooseContextForm">
+      <!--	
+	  <label for="first-name">First Name: </label>
+	  <input id="first-name" type="text" formControlName="firstName">
+	
+	  <label for="last-name">Last Name: </label>
+	  <input id="last-name" type="text" formControlName="lastName">
+  -->
+
+      <mat-form-field appearance="outline" class="form-field">
+        <mat-label for="namefield" class="ml-4 flex-grow-1">Context name</mat-label>
+
+        <input
+          matInput
+          #contextInput
+          (keyup)="(0)"
+          [matAutocomplete]="auto"
+          placeholder="Name"
+          type="text"
+          [formControlName]="namefield"
+          required
+        />
+
         <mat-autocomplete #auto="matAutocomplete">
           <mat-option
             (onSelectionChange)="(contextInput.value != undefined)"
             *ngFor="let ctx of filteredContexts | async"
             [value]="ctx.name"
+            >{{ ctx.name }}</mat-option
           >
-            <span>{{ ctx.name }}</span> |
-            <small>UUID: {{ ctx.id }}</small>
-          </mat-option>
         </mat-autocomplete>
       </mat-form-field>
+
+      <mat-form-field appearance="outline" class="form-field">
+        <mat-label for="uidfield">Context UUID</mat-label>
+        <input matInput id="uidfield" type="text" placeholder="UUID" formControlName="uidfield" readonly />
+      </mat-form-field>
+
+      <!--
+      <div class="form-group">
+		  <mat-form-field appearance="outline" class="form-field">
+        <mat-label class="ml-4 flex-grow-1">UUID</mat-label>
+        <input type="text" [formControl]="idCtrl"  >
+        </mat-form-field>
+     </div>
+     -->
     </form>
-  </div>
-</div>
-<div class="row">
-  <h3>Resource tree</h3>
-  <div class="d-flex flex-row col-md-3">
-    <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="resources-tree">
-      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
-        <button mat-button (click)="treeNode.emit(node)">
-          {{ node.name }}
-        </button>
-      </mat-tree-node>
-      <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
-        <div class="mat-tree-node">
-          <button mat-icon-button matTreeNodeToggle>
-            <mat-icon class="mat-icon-rtl-mirror">
-              {{ nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
-            </mat-icon>
-          </button>
-          <!--<button mat-button (click)="loadTable(node)">-->
-          <button mat-button (click)="treeNode.emit(node)">
-            {{ node.name }}
-          </button>
-        </div>
-        <div [class.resources-tree-invisible]="!nestedTreeControl.isExpanded(node)" role="group">
-          <ng-container matTreeNodeOutlet></ng-container>
-        </div>
-      </mat-nested-tree-node>
-    </mat-tree>
-  </div>
-  <div class="col-md-9">
-    <jhi-table-screen> </jhi-table-screen>
+    <!--
+      <mat-form-field>
+        <mat-label class="ml-4 flex-grow-1">UUID</mat-label>
+        <input #uuidInput  placeholder="UUID"  [formControl]="contextCtrl" contenteditable="false" />
+      </mat-form-field>
+      -->
+    <div class="row">
+      <h3>Resource tree</h3>
+      <div class="d-flex flex-row col-md-3">
+        <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="resources-tree">
+          <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
+            <button mat-button (click)="treeNode.emit(node)">
+              {{ node.name }}
+            </button>
+          </mat-tree-node>
+          <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
+            <div class="mat-tree-node">
+              <button mat-icon-button matTreeNodeToggle>
+                <mat-icon class="mat-icon-rtl-mirror">
+                  {{ nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
+                </mat-icon>
+              </button>
+              <!--<button mat-button (click)="loadTable(node)">-->
+              <button mat-button (click)="treeNode.emit(node)">
+                {{ node.name }}
+              </button>
+            </div>
+            <div [class.resources-tree-invisible]="!nestedTreeControl.isExpanded(node)" role="group">
+              <ng-container matTreeNodeOutlet></ng-container>
+            </div>
+          </mat-nested-tree-node>
+        </mat-tree>
+      </div>
+      <div class="col-md-9">
+        <jhi-table-screen> </jhi-table-screen>
+      </div>
+    </div>
   </div>
 </div>

src/main/webapp/app/rsc-tree/rsc-tree.component.scss

@@ -40,5 +40,10 @@
 
 .mat-mdc-form-field {
   font-size: 14px;
-  width: 100%;
+  width: 40%;
+}
+
+#uuidInput {
+  font-size: 14px;
+  width: 40%;
 }

src/main/webapp/app/rsc-tree/rsc-tree.component.ts

@@ -7,7 +7,7 @@ import { IResource } from 'app/services/i-resource';
 import { ContextsLoaderService } from 'app/services/contexts-loader.service';
 import { IContextNode } from 'app/services/i-context-node';
 import { Observable, map, startWith } from 'rxjs';
-import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
+import { FormControl, FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'jhi-rsc-tree',
@@ -22,15 +22,29 @@ export class RscTreeComponent implements OnInit {
 
   allContexts: IContextNode[];
   filteredContexts: Observable<IContextNode[]> | any;
-  myForm: FormGroup | any;
 
-  contextCtrl: FormControl;
+  chooseContextForm = new FormGroup({
+    namefield: new FormControl(''),
+    uidfield: new FormControl(''),
+  });
 
   constructor(private resLoader: ResourcesLoaderService, private ctxLoader: ContextsLoaderService, private formBuilder: FormBuilder) {
     this.allContexts = {} as IContextNode[];
-    this.contextCtrl = new FormControl();
   }
 
+  //MT: per chiamare le direttive formControlName
+  get namefield(): any {
+    return this.chooseContextForm.get('namefield');
+  }
+  get uidfield(): any {
+    return this.chooseContextForm.get('uidfield');
+  }
+
+  /*
+    onSubmit(): void {
+      console.log(this.chooseContextForm.value); 
+    }*/
+
   ngOnInit(): void {
     this.resLoader.getResourcesByContext().subscribe(res => {
       this.nestedDataSource.data = res;
@@ -39,15 +53,11 @@ export class RscTreeComponent implements OnInit {
     this.ctxLoader.getData().subscribe(res => {
       this.allContexts = res;
       console.log('*******numero contesti...', res.length);
+      this.filteredContexts = this.chooseContextForm.get('namefield')?.valueChanges.pipe(
+        startWith(''),
+        map(name => (name ? this.doFilter(name) : this.allContexts.slice()))
+      );
     });
-    this.myForm = this.formBuilder.group({
-      context: [],
-    });
-
-    this.filteredContexts = this.contextCtrl.valueChanges.pipe(
-      startWith(''),
-      map(val => (val ? this.filterContexts(val) : Array.from(this.allContexts).slice()))
-    );
   }
 
   hasNestedChild(_: number, node: IResource): boolean {
@@ -58,15 +68,22 @@ export class RscTreeComponent implements OnInit {
     }
   }
 
-  private filterContexts(value: string): IContextNode[] {
-    const filterValue = value.toLowerCase();
-    return this.allContexts.filter(ctx => ctx.name.toLowerCase().includes(value.toLowerCase()));
+  private doFilter(name: string): IContextNode[] {
+    return this.allContexts.filter(ctx => ctx.name.toLowerCase().includes(name.toLowerCase()));
   }
-  /* TODO: modificare per gestire eventuali eventi sulla onselect
-	onSelectedContext(uid:string):void {
+
+  /*
+    onEnter(evt: any){
+    if (evt.source.selected) {
+    alert("hello ");
+    }
+  }*/
+
+  /*
+  //TODO: modificare per gestire eventuali eventi sulla onselect
+	private onSelectedContext(uid:string):void {
 		   this.resLoader.getResourcesByContext().subscribe(res => {
       this.nestedDataSource.data = res;
     });
-	}
-	*/
+	}*/
 }

src/main/webapp/app/rsc-tree/rsc-tree.module.ts

@@ -6,7 +6,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { TableScreenComponent } from 'app/table-screen/table-screen.component';