Skip to content

Commit

Permalink
updated the documentation.
Browse files Browse the repository at this point in the history
  • Loading branch information
CORP\Sudheep.Divakar committed Sep 21, 2023
1 parent 1e8a818 commit 028a57e
Showing 1 changed file with 102 additions and 59 deletions.
161 changes: 102 additions & 59 deletions ...tures/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,28 @@ <h2 class="go-heading-2 go-heading--no-wrap">Reactive Forms</h2>
<go-copy cardId="reactive-forms" goCopyCardLink></go-copy>
</ng-container>
<ng-container go-card-content>
<h4 class="go-heading-4">As per the <a class="go-link" href="https://angular.io/guide/reactive-forms">Angular Documentation</a>:</h4>
<h4 class="go-heading-4">
As per the
<a class="go-link" href="https://angular.io/guide/reactive-forms"
>Angular Documentation</a
>:
</h4>
<p class="go-body-copy">
Reactive forms use an explicit and immutable approach to
managing the state of a form at a given point in time.
Each change to the form state returns a new state, which
maintains the integrity of the model between changes.
Reactive forms are built around observable streams, where
form inputs and values are provided as streams of input
values, which can be accessed synchronously.
Reactive forms use an explicit and immutable approach to managing the
state of a form at a given point in time. Each change to the form state
returns a new state, which maintains the integrity of the model between
changes. Reactive forms are built around observable streams, where form
inputs and values are provided as streams of input values, which can be
accessed synchronously.
</p>
<p class="go-body-copy go-body-copy--no-margin">
Reactive forms differ from template-driven forms in distinct
ways. Reactive forms provide more predictability with
synchronous access to the data model, immutability with
observable operators, and change tracking through observable
streams. If you prefer direct access to modify data in your
template, template-driven forms are less explicit because they
rely on directives embedded in the template, along with mutable
data to track changes asynchronously.
Reactive forms differ from template-driven forms in distinct ways.
Reactive forms provide more predictability with synchronous access to
the data model, immutability with observable operators, and change
tracking through observable streams. If you prefer direct access to
modify data in your template, template-driven forms are less explicit
because they rely on directives embedded in the template, along with
mutable data to track changes asynchronously.
</p>
</ng-container>
</go-card>
Expand All @@ -34,15 +37,22 @@ <h2 class="go-heading-2 go-heading--no-wrap">Required Inputs</h2>
<go-copy cardId="required-inputs" goCopyCardLink></go-copy>
</ng-container>
<ng-container go-card-content>
<h4 class="go-heading-4">As per the <a class="go-link" href="https://angular.io/api/forms/Validators#validate-that-the-field-is-non-empty">Angular Documentation</a>:</h4>
<h4 class="go-heading-4">
As per the
<a
class="go-link"
href="https://angular.io/api/forms/Validators#validate-that-the-field-is-non-empty"
>Angular Documentation</a
>:
</h4>
<p class="go-body-copy">
Form controls have the ability to pass in Validators. In the case of every form input in Goponents we pass a control
thus you may specify on the control passed in to any form input a Validators.required validator on the control. Adding this validator
to any control in Goponents will render a red asterisk next to the label automatically.
Form controls have the ability to pass in Validators. In the case of
every form input in Goponents we pass a control thus you may specify on
the control passed in to any form input a Validators.required validator
on the control. Adding this validator to any control in Goponents will
render a red asterisk next to the label automatically.
</p>
<code
[highlight]="requiredControl"
class="code-block--no-bottom-margin">
<code [highlight]="requiredControl" class="code-block--no-bottom-margin">
</code>
</ng-container>
</go-card>
Expand All @@ -53,40 +63,62 @@ <h2 class="go-heading-2 go-heading--no-wrap">Validation Errors</h2>
<go-copy cardId="validation-errors" goCopyCardLink></go-copy>
</ng-container>
<ng-container go-card-content>
<h4 class="go-heading-4">As per the <a class="go-link" href="https://angular.io/api/forms/AbstractControl#seterrors">Angular Documentation</a>:</h4>
<h4 class="go-heading-4">
As per the
<a
class="go-link"
href="https://angular.io/api/forms/AbstractControl#seterrors"
>Angular Documentation</a
>:
</h4>
<p class="go-body-copy">
Form controls have the ability to hold a set of <code class="code-block--inline">ValidationErrors</code>. In the case of every form input in Goponents we automatically look for these
<code class="code-block--inline">ValidationErrors</code> and render error text beneath the form element dynamically. This is how form error handling should be done within Goponents.
Form controls have the ability to hold a set of
<code class="code-block--inline">ValidationErrors</code>. In the case of
every form input in Goponents we automatically look for these
<code class="code-block--inline">ValidationErrors</code> and render
error text beneath the form element dynamically. These errors are
displayed by default, but they can be hidden by setting
<code class="code-block--inline">hideFieldError</code> input property to
true. This is how form error handling should be done within Goponents.
</p>

<go-input
[control]="validationsExControl"
label="School"
placeholder="Try typing something...">
placeholder="Try typing something..."
>
</go-input>
<code [highlight]="validationsEx"></code>
<p class="go-body-copy">
Angular provides some <code class="code-block--inline">ValidationErrors</code> out of the box, Goponents provides default error messages for:
<code class="code-block--inline">email</code>, <code class="code-block--inline">max</code>, <code class="code-block--inline">maxlength</code>,
<code class="code-block--inline">min</code>, <code class="code-block--inline">minlength</code>, <code class="code-block--inline">required</code>, and <code class="code-block--inline">requiredtrue</code>.
These will automatically render error messages if the matching Angular Validators are set for the control. If desired, these can be overridden by
passing a key/value validator with the same name of the Angular one and a custom string as the value.
Angular provides some
<code class="code-block--inline">ValidationErrors</code> out of the box,
Goponents provides default error messages for:
<code class="code-block--inline">email</code>,
<code class="code-block--inline">max</code>,
<code class="code-block--inline">maxlength</code>,
<code class="code-block--inline">min</code>,
<code class="code-block--inline">minlength</code>,
<code class="code-block--inline">required</code>, and
<code class="code-block--inline">requiredtrue</code>. These will
automatically render error messages if the matching Angular Validators
are set for the control. If desired, these can be overridden by passing
a key/value validator with the same name of the Angular one and a custom
string as the value.
</p>
</ng-container>
</go-card>

<go-card class="go-column go-column--100">
<ng-container go-card-header>
<h3 class="go-heading-3">
Form Elements Example
</h3>
<h3 class="go-heading-3">Form Elements Example</h3>
<ul class="card__action-list">
<li>
<a
target="_blank"
class="go-link go-link--unstyled"
href="https://github.com/mobi/goponents/tree/dev/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview">
<go-icon-button buttonIcon="code">
</go-icon-button>
href="https://github.com/mobi/goponents/tree/dev/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview"
>
<go-icon-button buttonIcon="code"> </go-icon-button>
</a>
</li>
</ul>
Expand All @@ -98,84 +130,95 @@ <h3 class="go-heading-3">
label="Form Theme"
[clearable]="false"
[control]="themeSelect"
[items]="['light', 'dark']">
[items]="['light', 'dark']"
>
</go-select>
</div>
<hr class="go-hr">
<hr class="go-hr" />
<form
class="go-container go-form go-container--form"
[ngClass]="{ 'go-form--dark card-form-dark': themeSelect.value === 'dark' }"
[formGroup]="form">
[ngClass]="{
'go-form--dark card-form-dark': themeSelect.value === 'dark'
}"
[formGroup]="form"
>
<div class="go-column go-column--100 go-column--no-padding">
<h4 class="go-heading go-heading-4">Create Profile</h4>
</div>
<go-input
label="Name"
class="go-column go-column--100"
[control]="form.get('name')">
[control]="form.get('name')"
>
</go-input>
<go-text-area
label="Bio"
class="go-column go-column--100"
[control]="form.get('bio')">
[control]="form.get('bio')"
>
</go-text-area>
<go-datepicker
label="Date of Birth"
class="go-column go-column--100"
[theme]="themeSelect.value"
[maxDate]="maxBirthDate"
[control]="form.get('birthday')">
[control]="form.get('birthday')"
>
</go-datepicker>
<go-timepicker
label="Time of Birth"
class="go-column go-column--100"
[theme]="themeSelect.value"
[control]="form.get('birthtime')">
[control]="form.get('birthtime')"
>
</go-timepicker>
<go-file-upload
label="Profile Photo"
class="go-column go-column--100"
[control]="form.get('picture')"
[theme]="themeSelect.value">
[theme]="themeSelect.value"
>
</go-file-upload>
<go-select
label="Favorite Character"
class="go-column go-column--100"
[control]="form.get('favoriteCharacter')"
[theme]="themeSelect.value"
[items]="hpCharacters">
[items]="hpCharacters"
>
</go-select>
<go-switch-toggle
label="Enable Notifications"
class="go-column go-column--100"
[control]="form.get('enableNotifications')">
[control]="form.get('enableNotifications')"
>
</go-switch-toggle>
<go-radio-group
legend="Notification Method"
class="go-column go-column--100"
[control]="form.get('notificationMethod')">
[control]="form.get('notificationMethod')"
>
<div>
<go-radio-button
label="Push" formValue="push">
</go-radio-button>
<go-radio-button label="Push" formValue="push"> </go-radio-button>
</div>
<div>
<go-radio-button
label="Email" formValue="email">
</go-radio-button>
<go-radio-button label="Email" formValue="email"> </go-radio-button>
</div>
</go-radio-group>
<go-checkbox-group
legend="Notifications Received"
class="go-column go-column--100"
[control]="form.get('notificationsReceived')">
[control]="form.get('notificationsReceived')"
>
<go-checkbox
label="Comments"
[control]="form.get('notificationsReceived').get('comments')">
[control]="form.get('notificationsReceived').get('comments')"
>
</go-checkbox>
<go-checkbox
label="Mentions"
[control]="form.get('notificationsReceived').get('mentions')">
[control]="form.get('notificationsReceived').get('mentions')"
>
</go-checkbox>
</go-checkbox-group>
<div class="go-column go-column--100 go-column--no-padding">
Expand Down

0 comments on commit 028a57e

Please sign in to comment.