docs(autocomplete): Adds option group example #10666

raygervais · Apr 2, 2018

fixes #10196,
StackBlitz example: https://stackblitz.com/edit/angular-smg2xm?file=app/app.component.ts

Adds a option group example which displays ideal logic and best practices for the material autocomplete component when using said groups.

crisbeto · Apr 2, 2018

crisbeto reviewed Apr 2, 2018

View changes

crisbeto · Apr 2, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html

+          </mat-optgroup>
+        </mat-autocomplete>
+      </mat-form-field> 
+    </div>  


Unnecessary closing tag.

crisbeto · Apr 2, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html

@@ -0,0 +1,13 @@
+<form [formGroup]="animalForm" novalidate>
+      <mat-form-field>


Indentation seems to be wrong here.

crisbeto · Apr 2, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html

+        <input type="text" matInput placeholder="Species Group" formControlName="speciesGroup" required [matAutocomplete]="autoGroup"/>
+        <mat-autocomplete #autoGroup="matAutocomplete">
+          <mat-optgroup *ngFor="let group of speciesGroupeOptions | async" [label]="group.letter">
+            <mat-option *ngFor="let name of group.name"  [value]="name">


Extra space before the value binding.

crisbeto · Apr 2, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html

+        </mat-autocomplete>
+      </mat-form-field> 
+    </div>  
+  </form>  


Needs an extra line at the end of the file.

crisbeto · Apr 2, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';


Spacing around the imports is inconsistent.

crisbeto · Apr 2, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts

+class SpeciesGroup {
+    letter:string;
+    name: string[];
+}


Missing a newline at the end of the file.

crisbeto · Apr 2, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts

+}
+
+class SpeciesGroup {
+    letter:string;


Needs a space after letter:.

crisbeto · Apr 2, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts

+
+class SpeciesGroup {
+    letter:string;
+    name: string[];


Since this is an array it should be called names.

crisbeto · Apr 2, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts

+    
+    buildForm() {
+        this.animalForm = this.fb.group({
+            species: ['', [Validators.required]],


I don't think that we should start putting validation on this. We try to keep the examples as simple as possible and in this case the validation doesn't add anything.

crisbeto · Apr 2, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts

+    filterGroup(val: string): SpeciesGroup[] {
+        if (val) {
+            return this.speciesGroup
+            .map(group => ({ letter: group.letter, name: this._filter(group.name, val) }))


The map and the filter need some indentation.

raygervais · Apr 2, 2018

Fixed @crisbeto, I also forked the original StackBlitz and made the updates here for visual testing / inspection. Thanks for pointing out the inconsistencies, it appears I need more coffee in my system before I touch a keyboard again ☕️

crisbeto · Apr 3, 2018

crisbeto reviewed Apr 3, 2018

View changes

crisbeto · Apr 3, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts

+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Observable } from 'rxjs/Observable';
+import { startWith } from 'rxjs/operators/startWith';


In general we don't do spaces around the imports. E.g. these should be import {startWith} from 'rxjs/operators/startWith';

crisbeto · Apr 3, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts

+  
+  ngOnInit() {
+    this.stateGroupOptions = this.stateForm.get('stateGroup').valueChanges
+    .pipe(


The .pipe should either be on the previous line or be indented.

crisbeto · Apr 3, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts

+  stateGroupOptions: Observable<StateGroup[]>;
+  
+  constructor(private fb: FormBuilder) {
+    this.stateForm = this.fb.group({


You can initialize this one when you declare the property.

crisbeto · Apr 3, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts

+    names: ['Vermont', 'Virginia']
+  }, {
+    letter: 'W',
+    names: ['Washingto n', 'West Virginia', 'Wisconsin', 'Wyoming']


Extra space before the "n".

raygervais · Apr 4, 2018

Thanks for the reviews @crisbeto, I do apologize for the little items such as the spacing which really I should be catching as well. Will make note to improve and be diligent about that.

raygervais · Apr 4, 2018

Just noticed the lint and e2e failures, will address today.

raygervais · Apr 9, 2018

Sorry for the delay, I've been wrestling school obligations and apartment hunting prior to starting a new job. Does anyone have any idea how to fix the lint error here? I have not seen it before:

ERROR: /home/travis/build/angular/material2/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts[2, 33]: 'Validators' is declared but its value is never read.

Here is the code that I'm trying to use:

stateForm: FormGroup = this.fb.group({
  stateGroup: '',
});

rafaelss95 · Apr 9, 2018

Just remove Validators from import.

rafaelss95 · Apr 9, 2018

rafaelss95 reviewed Apr 9, 2018

View changes

rafaelss95 · Apr 9, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html

@@ -0,0 +1,12 @@
+<form [formGroup]="stateForm" novalidate>


novalidate isn't necessary.

rafaelss95 · Apr 9, 2018

rafaelss95 reviewed Apr 9, 2018

View changes

rafaelss95 · Apr 9, 2018

src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts

+  }
+}
+
+class StateGroup {


You could replace this by an Interface and move this to the top of the file (after imports);

raygervais · Apr 16, 2018

Thanks for the tips @rafaelss95, and sorry for the delay. I've fixed the Lint / E2E issues, and the failing test case relates to Material Table. If there is any other fix needed, I'd be happy to correct 👍

crisbeto · Apr 16, 2018

crisbeto approved these changes Apr 16, 2018

View changes

LGTM

docs(autocomplete): Adds option group example
Adds a option group example which displays ideal logic and best practices for the material autocomplete component.

Loading status checks…

7ebc47a

raygervais requested review from amcdnl, crisbeto, jelbourn and kara as code owners Apr 2, 2018

googlebot added the cla: yes label Apr 2, 2018

josephperrott added the target: patch label Apr 6, 2018

docs(autocomplete): Fixes option group example
Changes code style and logic to expected logic and styleguide

Loading status checks…

23f7333

crisbeto added pr: lgtm pr: merge ready labels Apr 16, 2018

mmalerba merged commit 1cc0c7f into angular:master Apr 18, 2018
2 of 3 checks passed

2 of 3 checks passed

continuous-integration/travis-ci/pr The Travis CI build failed
Details

ci/circleci: build Your tests passed on CircleCI!
Details

cla/google All necessary CLAs are signed

angular/material2

Join GitHub today

docs(autocomplete): Adds option group example #10666

Conversation

raygervais commented Apr 2, 2018

raygervais requested review from amcdnl, crisbeto, jelbourn and kara as code owners Apr 2, 2018

googlebot added the cla: yes label Apr 2, 2018

crisbeto reviewed Apr 2, 2018 View changes

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

raygervais commented Apr 2, 2018

crisbeto reviewed Apr 3, 2018 View changes

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

raygervais commented Apr 4, 2018

This comment has been minimized.

raygervais commented Apr 4, 2018

josephperrott added the target: patch label Apr 6, 2018

This comment has been minimized.

raygervais commented Apr 9, 2018

This comment has been minimized.

rafaelss95 commented Apr 9, 2018

rafaelss95 reviewed Apr 9, 2018 View changes

This comment has been minimized.

rafaelss95 reviewed Apr 9, 2018 View changes

This comment has been minimized.

This comment has been minimized.

raygervais commented Apr 16, 2018

crisbeto approved these changes Apr 16, 2018 View changes

crisbeto added pr: lgtm pr: merge ready labels Apr 16, 2018

Hide details View details mmalerba merged commit 1cc0c7f into angular:master Apr 18, 2018 2 of 3 checks passed

2 of 3 checks passed

crisbeto reviewed Apr 2, 2018

View changes

crisbeto reviewed Apr 3, 2018

View changes

rafaelss95 reviewed Apr 9, 2018

View changes

rafaelss95 reviewed Apr 9, 2018

View changes

crisbeto approved these changes Apr 16, 2018

View changes

mmalerba merged commit `1cc0c7f` into angular:master Apr 18, 2018
2 of 3 checks passed