docs(reactive-forms): Add new reactive forms guide #2835

kapunahelewong · 2016-11-20T16:10:44Z

Reactive-forms guide. Ready for Engineering Review

To Do

Add e2e tests.
@kara's review

DeborahK · 2016-12-05T17:14:29Z

public/docs/ts/latest/guide/reactive-forms.jade

+
+  - `FormGroup`: Allows you to group **FormControls**, **FormArrays**, and other **FormGroups**.
+
+  Below the import statements, use the `@Component` decorator to provide metadata to Angular:


Since this is decorating the class, consider using "above the class" instead of "below the import statements"

Oh - that's good. Thank you. Done.

DeborahK · 2016-12-05T17:33:03Z

public/docs/ts/latest/guide/reactive-forms.jade

+  The `selector` tells Angular where to render the form. And the `templateUrl` is 
+  the location of the HTML, or the contents of the form.
+
+  Next, create the component class with a simple form model by exporting a class called `HeroSignUpComponent`, 


Will the reader know what a "form model" is? I don't think we've used that term elsewhere in the docs. And we don't want reader to confuse this with the "data model" (often referred to as the form's model) which would be the hero property.

I think of the form's model as the data model for the form. ie Hero.
I think of the "form model" as the set of building blocks: FormGroup, FormControl, FormArray.
I'm not sure which one you are referring to in the text both above and below.

Changed the language a little but I'm going to do this throughout the doc.

DeborahK · 2016-12-05T17:36:14Z

public/docs/ts/latest/guide/reactive-forms.jade

+  Next, create the component class with a simple form model by exporting a class called `HeroSignUpComponent`, 
+  which will hold  the form model. The class name, `HeroSignUpComponent`, is arbitrary. You can 
+  name it whatever you like. The example code on this page has numbers after each 
+  iteration, but you don't need those numbers. **<-----IS THIS NECESSARY? MAYBE I'M NOT DOING THIS EXACTLY RIGHT**


Ward should probably be the one to answer this.

DeborahK · 2016-12-05T17:38:51Z

public/docs/ts/latest/guide/reactive-forms.jade

+  Inside the `FormGroup` called `form`, each `new FormControl()` instantiates a `FormControl` for the form. 
+  This way is repetitive, but it helps illustrate an important point later.
+
+  The form model is only half of a reactive form. In order to make it available to the user, the app needs a template.


To me a reactive form has:

Form model (FormGroup, etc)

Data model (Hero)

Template
So just the form model does not seem like 1/2. Do we want to be more clear on the form vs data model?

DeborahK · 2016-12-05T17:41:23Z

public/docs/ts/latest/guide/reactive-forms.jade

+
+:marked
+  On the `<form>` tag, `novalidate` prevents the browser from attempting any native validations 
+  and `[formGroup]="form"` lets Angular know that this is the form you’re referring to in the component class.


Might it be more clear to name the form something other than form? Maybe "heroForm"? That way the reader knows to set the [formGroup]= and doesn't think that the syntax is literally always [formGroup]="form".

Maybe change "this is the form" to "this is the form property" for clarity. Or "this is the heroForm property".

Done and done.

DeborahK · 2016-12-05T17:48:23Z

public/docs/ts/latest/guide/reactive-forms.jade

+  `constructor(public fb: FormBuilder)`. Inside the constructor, you can use `FormBuilder` to set the 
+  `form` as a group, which lets you instantiate the **FormControls** by simply using the `formControlName` 
+  and in this case, an empty value. In this way, `FormBuilder` instantiates each `FormControl` for you, 
+  reducing repetitive code. Now, you don't have to use `new` over and over.


This may also be a question for Ward ... but I didn't think we wanted to suggest that devs add the fb.group code to the constructor. I believe the recommendation is to use onNgInit.

"and in this case, an empty value" ... May want to explain why this is using an empty value here.

Added a note about empty value. @wardbell could you advise me on the fb.group code in the constructor?

Edit: Ward's ok with it because there's no logic.

DeborahK · 2016-12-05T17:52:29Z

public/docs/ts/latest/guide/reactive-forms.jade

+makeExample('reactive-forms/ts/app/hero-signup-versions.component.ts', 'v2','app/hero-signup.component.ts (excerpt)')(format=".")
+
+:marked
+  This form looks great, but are the model and template talking? To inspect what’s going on, add this after the 


What is "model" referring to here in "model and template"? Is this the form model or the data model? And what does "talking" mean in this context? Consider something like "but are the user's entries in the view reflected in the form model"?

I'll need your help on the model terminology. Added your wording "but are the...".

DeborahK · 2016-12-05T17:55:46Z

public/docs/ts/latest/guide/reactive-forms.jade

+
+  This structure is ok for a small form, but what if you need to add a lot more inputs? Even adding an 
+  address could double the size of your form. If you’re suddenly managing lots of individual 
+  **FormControls**, you need a way to organize them.


Is this the key reason to use a FormGroup? I thought it was to allow better structuring of the form model so that it matches with the data model. For example, a normal contact data model would have last name, first name, and an address object. That address object would have street address, city, etc. To map the form model better into that data model, we can use a FormGroup.

DeborahK · 2016-12-05T17:56:29Z

public/docs/ts/latest/guide/reactive-forms.jade

+:marked
+  The form is getting bigger, and in order to keep it maintainable you can group related **FormControls** using `FormGroup`. 
+  **FormGroups** are collections of **FormControls** that are registered  by name. Here, the **FormControls** are 
+  registered with the `formControlName` directive, as are the **FormControls** that are already in the form.


Same comment here as above.

DeborahK · 2016-12-05T18:01:13Z

public/docs/ts/latest/guide/reactive-forms.jade

+    td <code>myControl.status</code>
+    td
+      :marked
+         Returns the status of a `FormControl` as valid, invalid - **KARA, CAN YOU HELP ME HERE?**.


What do you need here? A definition of what these (valid/invalid) mean?

See this link: https://angular.io/docs/ts/latest/api/forms/index/AbstractControl-class.html#!#invalid-anchor
And if you scroll a bit up and down, it covers the other status values as well. Feel free to DM me if you have any questions about these.

Oh wow, thank you. I hadn't seen that those were listed under AbstractControl (duh). Very helpful!

DeborahK · 2016-12-05T18:06:27Z

public/docs/ts/latest/guide/reactive-forms.jade

+         **KARA, CAN YOU HELP ME HERE, TOO?**.                                    
+:marked
+  These are just a few examples to give you an idea of what's available. To read more about 
+  **WHERE SHOULD I LINK TO? THE API REF DOESN'T GO INTO THESE METHODS**


Maybe here: https://angular.io/docs/ts/latest/api/forms/index/AbstractControl-class.html

Got it, thank you 👍

DeborahK · 2016-12-05T18:09:16Z

public/docs/ts/latest/guide/reactive-forms.jade

+  You can set default data in the form using `patchValue` or `setValue`. The main difference between 
+  the two is that `patchValue` allows you to provide values as needed, specifying only the fields you 
+  want to provide values for where `setValue` requires that you pass in every control in the form.
+


I am not looking at the associated code when reading this ... so not sure if you are already covering this ... but in most normal circumstances I would guess that devs won't need to use patchValue or setValue. They will instead put the default value in when creating the form model. Consider making it clear when a dev would need to do this instead of setting the values when creating the form model.

The last sentence above is a bit long. Consider breaking it up to make it easier for a reader to digest. Also, do we "pass in every control"? Or "pass a value for every control"?

Broke up the long sentence. Added a note about setting a value normally, but now I'm wondering why use patchValue and setValue - I have a sentence that's incomplete right now. Will need to ask you about it.

DeborahK · 2016-12-05T18:13:35Z

public/docs/ts/latest/guide/reactive-forms.jade

+
+  To use `patchValue`, add it to the constructor in the component class and pass in an object of key value 
+  pairs for the **FormControls** you want to give default values. Here, the argument is an object that provides 
+  a value for the name `FormControl`.


Again, didn't look at the exact code here ... but it seems that if the form model is created in the constructor that defaults would be provided there. There would never? be a need to use patchValue in this circumstance.
Let me know if you want me to look more closely at the example provided here.

DeborahK · 2016-12-05T18:14:28Z

public/docs/ts/latest/guide/reactive-forms.jade

+
+:marked
+  Here is the same approach but using `setValue`. Notice that you have to mirror the structure of the form 
+  model and provide a value for every single `FormControl`.


Same comment as above.

DeborahK · 2016-12-05T18:15:17Z

public/docs/ts/latest/guide/reactive-forms.jade

+
+:marked
+  With `setValue`, you can give it an empty value as in the password and confirm **FormControls**.
+


"give it", what is "it" in this sentence?

Got it. Changed to FormControl.

DeborahK · 2016-12-05T18:16:48Z

public/docs/ts/latest/guide/reactive-forms.jade

+  The `buildGroup()` method is of type `FormGroup` and returns the address related **FormControls**.
+
+  There’s one last thing to put into the component class and that’s the `add()` function which you’ll use in the 
+  template on an Add Secret Lair button. A hero can have more than one secret lair, right?


Make me laugh! :-)

DeborahK · 2016-12-05T18:19:27Z

public/docs/ts/latest/guide/reactive-forms.jade

+  This is the perfect task for `FormArray`. You imported it in `hero-signup.component.ts` when creating 
+  the [reactive forms component](#create-comp) at the beginning of this guide.
+
+  You’ll need to refactor a little. In the component class, add an `addresses` property as type `FormArray`.


May want to provide an overview of what a FormArray is. The above does a good job of defining when to use them ... but not really what they are. May also want to provide some context for how to use them before going into the detail of building them. Otherwise the reader has no context for the purpose of buildArray, buildGroup, etc.

Added. Thank you for the explanation.

DeborahK · 2016-12-05T18:23:29Z

public/docs/ts/latest/guide/reactive-forms.jade

+
+:marked
+  Inside the `FormGroup` called `form`, each `new FormControl()` instantiates a `FormControl` for the form. 
+  This way is repetitive, but it helps illustrate an important point later.


Consider explaining a bit about the arguments to the FormControl constructor. The first parameter is the default value. The second parameter is an array of validators. The third parameter is an array of async validators. (I know we don't want to talk about validation here ... but at least mentioning the syntax here is helpful to the reader.)

Agreed. Got it in there and then referenced to the form validation cookbook for further reading.

kara · 2017-01-11T18:20:55Z

public/docs/ts/latest/guide/reactive-forms.jade

+
+  One advantage of working with form control objects directly is that value and validity updates 
+  are always synchronous and under your control. 
+  You won't encounter the timing issues that sometimes plague a template-driven form.


I think we still need to mention that template-driven forms are async, or this point doesn't make sense.

This section is also an important place to establish some of the benefits of choosing reactive forms (whereas the TD section should have the benefits for choosing TD forms).

Other things to mention: ease of using reactive patterns, ease of testing (though we won't get into an example here), ease of validation (I think we should add a simple validator somewhere).

I'm confused. Where is the async section we talked about?

Edit: Oh I see it's been banished to the appendix.

kara

Some more general comments

kara · 2017-01-11T18:22:46Z

public/docs/ts/latest/guide/reactive-forms.jade

+
+  One advantage of working with form control objects directly is that value and validity updates 
+  are always synchronous and under your control. 
+  You won't encounter the timing issues that sometimes plague a template-driven form.


This section is also an important place to establish some of the benefits of choosing reactive forms (whereas the TD section should have the benefits for choosing TD forms).

Other things to mention: ease of using reactive patterns, ease of testing (though we won't get into an example here), ease of validation (I think we should add a simple validator somewhere).

kara · 2017-01-11T18:23:06Z

public/docs/ts/latest/guide/reactive-forms.jade

+
+  You place HTML form controls (such as `<input>` and `<select>`) in the component template and 
+  bind them to _data model_ properties in the component, using directives 
+  like `[(ngModel)]`.


Please remove the [()]

Removed. I think these were removed previously but got wiped/re-inserted accidentally.

kara · 2017-01-11T18:24:53Z

public/docs/ts/latest/guide/reactive-forms.jade

+
+  When writing in a reactive style, you determine the timing and flow of data between 
+  the data model and the screen. You rarely, if ever, use two-way data binding. 
+  For this reason, the ngModel directive is not part of the ReactiveFormsModule.


We should remove this sentence (it's not completely true)

Can you suggest an alternative sentence that explains why NgModel is not available when you import ReactiveFormsModule? My understanding from @DeborahK is that you actively discourage using it in reactive forms (after importing it from FormsModule).

I removed the first sentence, but @kara could you help me smooth this out a little? I only have at the moment:

When writing in a reactive style, you rarely, if ever, use two-way data binding.
For this reason, the ngModel directive is not part of the ReactiveFormsModule.

kara · 2017-01-11T18:27:13Z

public/docs/ts/latest/guide/reactive-forms.jade

+
+  You'll learn about reactive forms by building one from scratch.
+
+  In the next section, you'll prepare your project for reactive forms.


Can we say 'set up your project for the reactive form demo' or something similar? What's here implies that these steps are all necessary, when some steps like creating the Hero model, etc, are demo-specific.

kara · 2017-01-11T18:28:39Z

public/docs/ts/latest/guide/reactive-forms.jade

+  [component-relative paths](./cookbook/component-relative-paths.html) in file URLs 
+  such as when specifying the `templateUrl`.
+
+  Next, create an exported `HeroDetailComponent` class with a `FormControl`. 


Can we first have an example with a simple FormControl? It's odd that we don't cover it anywhere, since it is the simplest version of the form.

@kara What would that look like. You can see the progression now. How would one do a control all by itself in the absence of the form envelope? Does that mean the <form> element is not in the html for that example. TBH, we are confused about both the use case and how to code it. A code snippet or plunker would help.

kara · 2017-01-11T18:32:47Z

public/docs/ts/latest/guide/reactive-forms.jade

+    td
+      :marked
+        the validity of a `FormControl`. Possible values: `valid`, 
+         `invalid`, `pending`, or `disabled`.


These should be 'VALID', 'INVALID', PENDING', and 'DISABLED'.

kara · 2017-01-11T18:33:44Z

public/docs/ts/latest/guide/reactive-forms.jade

+    td <code>myControl.pristine</code>
+    td
+      :marked
+         `true` if the user has _not_ changed the value in the UI.


Might help to mention that its opposite is "dirty"

kara · 2017-01-11T18:34:02Z

public/docs/ts/latest/guide/reactive-forms.jade

+    td
+      :marked
+         `true` if the control user has not yet entered the HTML control
+          and triggered its blur event.


Might help to mention that its opposite is "touched"

kara · 2017-01-11T18:37:35Z

public/docs/ts/latest/guide/reactive-forms.jade

+  - It returns helpful error messages.
+
+  If you have a typo or nested controls incorrectly, `setValue` will catch 
+  the error and report it clearly. `patchValue` will fail silently.


Reading through this again, I think we should replace the three points above with a few sentences. The bullet points are a bit odd.

"It will not accept a data object that doesn't match the FormGroup structure or is missing values for any control in the group. This way, it can return helpful error messages if you have a typo or if you've nested controls incorrectly. patchValue will fail silently."

kara · 2017-01-11T18:40:08Z

public/docs/ts/latest/guide/reactive-forms.jade

+  The `HeroListComponent` uses an injected `HeroService` to retrieve heroes from the server
+  and then presents those heroes to the user as a series of buttons.
+  The `HeroService` emulates an HTTP service. 
+  It returns a `Promise` of heroes that resolves after a short delay, 


After talking over with @robwormald in person, we think this should be an observable.

googlebot · 2017-01-12T20:59:50Z

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored by someone other than the pull request submitter. We need to confirm that they're okay with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this state. It's up to you to confirm consent of the commit author(s) and merge this pull request when appropriate.

googlebot · 2017-01-12T20:59:50Z

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored by someone other than the pull request submitter. We need to confirm that they're okay with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this state. It's up to you to confirm consent of the commit author(s) and merge this pull request when appropriate.

kara · 2017-01-19T18:23:29Z

public/docs/ts/latest/guide/reactive-forms.jade

+  in the component class and bind them to native form control elements in the 
+  component template, using techniques described in this guide. 
+
+  With reactive forms, you create and manipulate form control objects directly in the 


Copy paste error? Should probably not repeat "With reactive forms". Just start with "You create..."

Changed. Good catch!

kara · 2017-01-19T18:26:14Z

public/docs/ts/latest/guide/reactive-forms.jade

+  Angular updates the mutable _data model_ with user changes as they happen.
+
+  When writing in a reactive style, you rarely, if ever, use two-way data binding. 
+  For this reason, the `ngModel` directive is not part of the ReactiveFormsModule.


I thought we were removing this line? Can we please remove?

Yes, my mistake. I misunderstood the last time you requested this. Just DM'd you about it to confirm.

kara · 2017-01-19T18:27:08Z

public/docs/ts/latest/guide/reactive-forms.jade

+
+  One advantage of working with form control objects directly is that value and validity updates 
+  are always synchronous and under your control. 
+  You won't encounter the timing issues that sometimes plague a template-driven form.


I'm confused. Where is the async section we talked about?

Edit: Oh I see it's been banished to the appendix.

kara · 2017-01-19T18:53:32Z

public/docs/ts/latest/guide/reactive-forms.jade

+a#formgroup
+:marked
+  ## Add a FormGroup
+  Usually, *FormControls* reside within a `FormGroup`. 


I'd specify that FormGroups are common when you have multiple controls. It's just as common to have a single FormControl on its own, so "usually" isn't accurate without qualification.

Usually, if you have multiple FormControls, you'll want to register them within a parent FormGRoup.

Got it. Changed.

kara · 2017-01-19T18:55:50Z

public/docs/ts/latest/guide/reactive-forms.jade

+  Now create the component's template, `app/hero-detail.component.html`, with the following markup.
+
+makeExample('reactive-forms/ts/app/hero-detail-1.component.html', 'simple-control','app/hero-detail.component.html')(format=".")
+


We should say something about what's going on here that mentions the formControl directive.

Absolutely, added copy.

kara · 2017-01-19T18:59:15Z

public/docs/ts/latest/guide/reactive-forms.jade

+a#appendix
+.l-main-section
+:marked
+  ## Appendix: Async vs. sync in Angular forms


This is a really important point for the advantages of reactive forms and should not be hidden in an appendix. Can we please move back up to the top?

kara · 2017-01-19T18:59:33Z

public/docs/ts/latest/guide/reactive-forms.jade

+  This also affects testing of template-driven forms. You always 
+  have to wrap your test block in `async()` or `fakeAsync()` to 
+  avoid looking for values in the form that aren't available yet. 
+  With reactive forms, you don't everything is available 


Typo: "you don't everything is available" => "everything is available"

Oh good catch. Thank you.

kara · 2017-01-19T19:00:53Z

public/docs/ts/latest/guide/reactive-forms.jade

+  ## Import the _ReactiveFormsModule_
+
+  The HeroDetailComponent template uses `formGroup` and `formControlName` 
+  directives from the `ReactiveFormsModule`.


Now that we've added the formControl directive, this needs to be updated right? At this point, we are not yet using those.

Ack. Thought I'd caught all those. I shifted a lot around yesterday. Thanks!

kara · 2017-01-19T19:05:35Z

public/docs/ts/latest/guide/reactive-forms.jade

+:marked
+ Then, you can easily make the `name` `FormControl` required by supplying the `name` 
+ property in the class with an array that holds two arguments, 
+ the initial value for `name` and `Validators.required`.  


Glad we are including this, but there is no explanation of why reactive validators are simpler to use. We need to mention that in TD forms, you must wrap validators in a directive for comparison and that reactive validators are simple, composable functions. Otherwise it doesn't make sense why this is here.

kara · 2017-01-19T19:07:59Z

public/docs/ts/latest/guide/reactive-forms.jade

+  `patchValue` will fail silently.
+
+  If you have a typo or nested controls incorrectly, `setValue` will catch 
+  the error and report it clearly. `patchValue` will fail silently.


Let's remove this sentence. It just repeats the sentence before it.

Yes, thanks.

googlebot · 2017-01-31T21:47:56Z

CLAs look good, thanks!

googlebot · 2017-01-31T21:47:56Z

CLAs look good, thanks!

googlebot added the CLA: yes label Nov 20, 2016

kapunahelewong force-pushed the wong-reactive-forms branch 5 times, most recently from a0ab7bf to e287a06 Compare November 28, 2016 22:29

wardbell force-pushed the wong-reactive-forms branch from 4dfd4a5 to 36eb3ef Compare November 29, 2016 01:12

wardbell changed the title ~~[WIP] Add reactive forms~~ [WIP] docs(reactive-forms): Add new reactive forms guide Nov 29, 2016

wardbell force-pushed the wong-reactive-forms branch from 36eb3ef to 7d897d0 Compare November 29, 2016 18:15

kapunahelewong force-pushed the wong-reactive-forms branch from 7d897d0 to e56bfd4 Compare December 1, 2016 15:21

DeborahK reviewed Dec 5, 2016

View reviewed changes

kapunahelewong force-pushed the wong-reactive-forms branch from b5e9660 to fbd9bac Compare December 5, 2016 17:24

DeborahK reviewed Dec 5, 2016

View reviewed changes

kapunahelewong force-pushed the wong-reactive-forms branch from 5d84faf to 1ca6e9a Compare December 6, 2016 16:04

kapunahelewong force-pushed the wong-reactive-forms branch from d73a04c to 373d0a7 Compare January 10, 2017 17:18

wardbell force-pushed the wong-reactive-forms branch from 6bcbd4b to 9a1e30e Compare January 11, 2017 04:16

kara reviewed Jan 11, 2017

View reviewed changes

kara suggested changes Jan 11, 2017

View reviewed changes

kapunahelewong force-pushed the wong-reactive-forms branch from 366eff2 to 60553d8 Compare January 12, 2017 01:17

wardbell force-pushed the wong-reactive-forms branch 3 times, most recently from 1897f6d to fe4b8d5 Compare January 12, 2017 10:39

googlebot added CLA: no and removed CLA: yes labels Jan 12, 2017

kapunahelewong force-pushed the wong-reactive-forms branch 2 times, most recently from 6f27f3d to 9e1aec1 Compare January 17, 2017 14:55

kara suggested changes Jan 19, 2017

View reviewed changes

kapunahelewong force-pushed the wong-reactive-forms branch 3 times, most recently from a136b93 to 937f572 Compare January 30, 2017 15:33

kapunahelewong force-pushed the wong-reactive-forms branch 2 times, most recently from 5f8e7ff to 8d2fb2a Compare January 31, 2017 21:47

googlebot added CLA: yes and removed CLA: no labels Jan 31, 2017

wardbell force-pushed the wong-reactive-forms branch from 8d2fb2a to 06ca24f Compare January 31, 2017 22:03

docs(reactive-forms): add reactive forms guide

f11bc59

wardbell force-pushed the wong-reactive-forms branch from 06ca24f to f11bc59 Compare February 1, 2017 00:14

wardbell merged commit 452c16d into angular:master Feb 1, 2017

wardbell deleted the wong-reactive-forms branch February 1, 2017 01:36

abdel-ships-it pushed a commit to abdel-ships-it/angular.io that referenced this pull request Feb 11, 2017

docs(reactive-forms): add reactive forms guide (angular#2835)

369d35c


		- `FormGroup`: Allows you to group FormControls, FormArrays, and other FormGroups.

		Below the import statements, use the `@Component` decorator to provide metadata to Angular:


		:marked
		With `setValue`, you can give it an empty value as in the password and confirm FormControls.


		You'll learn about reactive forms by building one from scratch.

		In the next section, you'll prepare your project for reactive forms.

		Now create the component's template, `app/hero-detail.component.html`, with the following markup.

		+makeExample('reactive-forms/ts/app/hero-detail-1.component.html', 'simple-control','app/hero-detail.component.html')(format=".")

docs(reactive-forms): Add new reactive forms guide #2835

docs(reactive-forms): Add new reactive forms guide #2835

Conversation

kapunahelewong commented Nov 20, 2016 • edited by wardbell Loading

Choose a reason for hiding this comment

kapunahelewong Dec 5, 2016 • edited Loading

Choose a reason for hiding this comment

DeborahK Dec 5, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DeborahK Dec 5, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DeborahK Dec 5, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kapunahelewong Dec 5, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kapunahelewong Dec 5, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kapunahelewong Dec 6, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DeborahK Dec 5, 2016 • edited Loading

Choose a reason for hiding this comment

kapunahelewong Dec 6, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kara left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

googlebot commented Jan 12, 2017

googlebot commented Jan 12, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kapunahelewong commented Nov 20, 2016 •

edited by wardbell

Loading

kapunahelewong Dec 5, 2016 •

edited

Loading

DeborahK Dec 5, 2016 •

edited

Loading

DeborahK Dec 5, 2016 •

edited

Loading

DeborahK Dec 5, 2016 •

edited

Loading

kapunahelewong Dec 5, 2016 •

edited

Loading

kapunahelewong Dec 5, 2016 •

edited

Loading

kapunahelewong Dec 6, 2016 •

edited

Loading

DeborahK Dec 5, 2016 •

edited

Loading

kapunahelewong Dec 6, 2016 •

edited

Loading