cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs-infra): implement figure styles (#33259)

Browse Source 
PR#28396 originally addressed an update via issue #23983 to make images more visible with a white background (implementation of gray "lightbox").

This PR implements those styles defined in PR#28396.

PR Close #33259
This commit is contained in:
Stefanie Fluin
2019-10-18 16:22:06 -07:00
committed by Andrew Kushnir
parent 355e54a410
commit ba29e4d953
46 changed files with 666 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
aio/content/guide/reactive-forms.md
View File

@ -64,8 +64,10 @@ The form control assigned to `name` is displayed when the component is added to
<code-example path="reactive-forms/src/app/app.component.1.html" region="app-name-editor" header="src/app/app.component.html (name editor)"></code-example>
<figure>
<img src="generated/images/guide/reactive-forms/name-editor-1.png" alt="Name Editor">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/reactive-forms/name-editor-1.png" alt="Name Editor">
</div>
</figure>
## Managing control values
@ -108,8 +110,10 @@ Update the template with a button to simulate a name update. When you click the
The form model is the source of truth for the control, so when you click the button, the value of the input is changed within the component class, overriding its current value.
<figure>
<img src="generated/images/guide/reactive-forms/name-editor-2.png" alt="Name Editor Update">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/reactive-forms/name-editor-2.png" alt="Name Editor Update">
</div>
</figure>
<div class="alert is-helpful">
@ -188,8 +192,10 @@ To display the `ProfileEditor` component that contains the form, add it to a com
`ProfileEditor` allows you to manage the form control instances for the `firstName` and `lastName` controls within the form group instance.
<figure>
<img src="generated/images/guide/reactive-forms/profile-editor-1.png" alt="Profile Editor">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/reactive-forms/profile-editor-1.png" alt="Profile Editor">
</div>
</figure>
## Creating nested form groups
@ -214,8 +220,10 @@ Add the `address` form group containing the `street`, `city`, `state`, and `zip`
The `ProfileEditor` form is displayed as one group, but the model is broken down further to represent the logical grouping areas.
<figure>
<img src="generated/images/guide/reactive-forms/profile-editor-2.png" alt="Profile Editor Update">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/reactive-forms/profile-editor-2.png" alt="Profile Editor Update">
</div>
</figure>
<div class="alert is-helpful">
@ -346,8 +354,10 @@ Display the current status of `profileForm` using interpolation.
<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.html" region="display-status" header="src/app/profile-editor/profile-editor.component.html (display status)"></code-example>
<figure>
<img src="generated/images/guide/reactive-forms/profile-editor-3.png" alt="Profile Editor Validation">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/reactive-forms/profile-editor-3.png" alt="Profile Editor Validation">
</div>
</figure>
The **Submit** button is disabled because `profileForm` is invalid due to the required `firstName` form control. After you fill out the `firstName` input, the form becomes valid and the **Submit** button is enabled.
@ -412,8 +422,10 @@ Add the template HTML below after the `<div>` closing the `formGroupName` elemen
The `*ngFor` directive iterates over each form control instance provided by the aliases form array instance. Because form array elements are unnamed, you assign the index to the `i` variable and pass it to each control to bind it to the `formControlName` input.
<figure>
<img src="generated/images/guide/reactive-forms/profile-editor-4.png" alt="Profile Editor Aliases">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/reactive-forms/profile-editor-4.png" alt="Profile Editor Aliases">
</div>
</figure>
Each time a new alias instance is added, the new form array instance is provided its control based on the index. This allows you to track each individual control when calculating the status and value of the root control.