docs(autocomplete): Adds option group example #10666

raygervais · 2018-04-02T14:32:52Z

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.

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

crisbeto · 2018-04-02T14:51:32Z

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

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


Unnecessary closing tag.

crisbeto · 2018-04-02T14:51:47Z

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 · 2018-04-02T14:52:02Z

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 · 2018-04-02T14:52:20Z

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 · 2018-04-02T14:53:25Z

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 · 2018-04-02T15:00:53Z

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 · 2018-04-02T15:01:06Z

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

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


Needs a space after letter:.

crisbeto · 2018-04-02T15:01:41Z

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 · 2018-04-02T15:02:39Z

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 · 2018-04-02T15:03:11Z

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 · 2018-04-02T17:05:38Z

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 · 2018-04-03T16:54:57Z

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 · 2018-04-03T16:55:32Z

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 · 2018-04-03T16:55:58Z

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 · 2018-04-03T16:56:17Z

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 · 2018-04-04T00:19:17Z

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 · 2018-04-04T14:31:17Z

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

raygervais · 2018-04-09T14:00:38Z

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 · 2018-04-09T16:31:52Z

Just remove Validators from import.

rafaelss95 · 2018-04-09T16:52:16Z

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

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


novalidate isn't necessary.

rafaelss95 · 2018-04-09T16:54:56Z

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);

Changes code style and logic to expected logic and styleguide

raygervais · 2018-04-16T01:13:35Z

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

LGTM

angular-automatic-lock-bot · 2019-09-08T19:01:15Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

docs(autocomplete): Adds option group example

7ebc47a

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

raygervais requested review from amcdnl, crisbeto, jelbourn and kara as code owners April 2, 2018 14:32

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Apr 2, 2018

crisbeto reviewed Apr 2, 2018

View reviewed changes

crisbeto reviewed Apr 3, 2018

View reviewed changes

raygervais force-pushed the autocomplete-documentation branch from 84b5503 to fcb8824 Compare April 4, 2018 00:12

raygervais force-pushed the autocomplete-documentation branch from fcb8824 to 337fcbc Compare April 5, 2018 00:56

josephperrott added the target: patch This PR is targeted for the next patch release label Apr 6, 2018

raygervais force-pushed the autocomplete-documentation branch from 337fcbc to e046c28 Compare April 9, 2018 16:39

rafaelss95 reviewed Apr 9, 2018

View reviewed changes

raygervais force-pushed the autocomplete-documentation branch from e046c28 to 1589821 Compare April 9, 2018 16:52

rafaelss95 reviewed Apr 9, 2018

View reviewed changes

raygervais force-pushed the autocomplete-documentation branch 3 times, most recently from 32976e5 to 76a8680 Compare April 16, 2018 00:27

docs(autocomplete): Fixes option group example

23f7333

Changes code style and logic to expected logic and styleguide

raygervais force-pushed the autocomplete-documentation branch from 76a8680 to 23f7333 Compare April 16, 2018 00:49

crisbeto approved these changes Apr 16, 2018

View reviewed changes

crisbeto added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Apr 16, 2018

mmalerba merged commit 1cc0c7f into angular:master Apr 18, 2018

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

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

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

docs(autocomplete): Adds option group example #10666

docs(autocomplete): Adds option group example #10666

Uh oh!

Conversation

raygervais commented Apr 2, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

raygervais commented Apr 2, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

raygervais commented Apr 4, 2018

Uh oh!

raygervais commented Apr 4, 2018

Uh oh!

raygervais commented Apr 9, 2018

Uh oh!

rafaelss95 commented Apr 9, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

raygervais commented Apr 16, 2018

Uh oh!

crisbeto left a comment

Choose a reason for hiding this comment

Uh oh!

angular-automatic-lock-bot bot commented Sep 8, 2019

Uh oh!

Uh oh!