ipsos-components

<mat-card class="demo-card demo-basic"> <mat-toolbar color="primary">Basic</mat-toolbar> <mat-card-content> <form> <mat-form-field class="demo-full-width"> <input matInput placeholder="Company (disabled)" disabled value="Google"> </mat-form-field> <table style="width: 100%" cellspacing="0"><tr> <td> <mat-form-field style="width: 100%" floatPlaceholder="never"> <input matInput placeholder="First name"> </mat-form-field> </td> <td> <mat-form-field style="width: 100%"> <input matInput placeholder="Long Last Name That Will Be Truncated"> </mat-form-field> </td> </tr></table> <p> <mat-form-field class="demo-full-width"> <textarea matInput placeholder="Address">1600 Amphitheatre Pkway</textarea> </mat-form-field> <mat-form-field class="demo-full-width"> <textarea matInput placeholder="Address 2"></textarea> </mat-form-field> </p> <table style="width: 100%" cellspacing="0"><tr> <td> <mat-form-field class="demo-full-width"> <input matInput placeholder="City" value="Mountain View"> </mat-form-field> </td> <td> <mat-form-field class="demo-full-width"> <input matInput placeholder="State" maxLength="2" value="CA"> </mat-form-field> </td> <td> <mat-form-field class="demo-full-width"> <input matInput #postalCode maxLength="5" placeholder="Postal Code" value="94043" pattern="[0-9]{5}"> <mat-hint align="end"> <mat-icon>mode_edit</mat-icon> <span aria-live="polite">{{postalCode.value.length}} / 5</span> </mat-hint> </mat-form-field> </td> </tr></table> </form> </mat-card-content> </mat-card> <mat-card class="demo-card demo-basic"> <mat-toolbar color="primary">Error messages</mat-toolbar> <mat-card-content> <h4>Regular</h4> <p> <mat-form-field> <input matInput placeholder="example" [(ngModel)]="errorMessageExample1" required> <mat-error>This field is required</mat-error> </mat-form-field> <mat-form-field> <input matInput placeholder="email" [formControl]="emailFormControl"> <mat-error *ngIf="emailFormControl.hasError('required')"> This field is required </mat-error> <mat-error *ngIf="emailFormControl.hasError('pattern')"> Please enter a valid email address </mat-error> </mat-form-field> </p> <h4>With hint</h4> <mat-form-field> <input matInput placeholder="example" [(ngModel)]="errorMessageExample2" required> <mat-error>This field is required</mat-error> <mat-hint>Please type something here</mat-hint> </mat-form-field> <form novalidate> <h4>Inside a form</h4> <mat-form-field> <input matInput name="example" placeholder="example" [(ngModel)]="errorMessageExample3" required> <mat-error>This field is required</mat-error> </mat-form-field> <button color="primary" mat-raised-button>Submit</button> </form> <h4>With a custom error function</h4> <mat-form-field> <input matInput placeholder="example" [(ngModel)]="errorMessageExample4" [errorStateMatcher]="customErrorStateMatcher" required> <mat-error>This field is required</mat-error> </mat-form-field> </mat-card-content> </mat-card> <mat-card class="demo-card demo-basic"> <mat-toolbar color="primary">Prefix + Suffix</mat-toolbar> <mat-card-content> <h4>Text</h4> <mat-form-field class="demo-text-align-end"> <input matInput placeholder="amount"> <span matPrefix>$ </span> <span matSuffix>.00</span> </mat-form-field> <h4>Icons</h4> <mat-form-field> <input matInput placeholder="amount"> <mat-icon matPrefix>attach_money</mat-icon> <mat-icon matSuffix>mode_edit</mat-icon> </mat-form-field> <h4>Icon buttons</h4> <mat-form-field> <input matInput placeholder="amount"> <button mat-icon-button matPrefix><mat-icon>attach_money</mat-icon></button> <button mat-icon-button matSuffix><mat-icon>mode_edit</mat-icon></button> </mat-form-field> </mat-card-content> </mat-card> <mat-card class="demo-card demo-basic"> <mat-toolbar color="primary">Divider Colors</mat-toolbar> <mat-card-content> <h4>Input</h4> <mat-form-field color="primary" > <input matInput placeholder="Default Color" value="example"> </mat-form-field> <mat-form-field color="accent"> <input matInput placeholder="Accent Color" value="example"> </mat-form-field> <mat-form-field color="warn"> <input matInput placeholder="Warn Color" value="example"> </mat-form-field> <h4>Textarea</h4> <mat-form-field color="primary"> <textarea matInput placeholder="Default Color">example</textarea> </mat-form-field> <mat-form-field color="accent"> <textarea matInput placeholder="Accent Color">example</textarea> </mat-form-field> <mat-form-field color="warn"> <textarea matInput placeholder="Warn Color">example</textarea> </mat-form-field> <h4>With error</h4> <mat-form-field color="primary" > <input matInput placeholder="Default Color" [(ngModel)]="dividerColorExample1" required> <mat-error>This field is required</mat-error> </mat-form-field> <mat-form-field color="accent"> <input matInput placeholder="Accent Color" [(ngModel)]="dividerColorExample2" required> <mat-error>This field is required</mat-error> </mat-form-field> <mat-form-field color="warn"> <input matInput placeholder="Warn Color" [(ngModel)]="dividerColorExample3" required> <mat-error>This field is required</mat-error> </mat-form-field> </mat-card-content> </mat-card> <mat-card class="demo-card demo-basic"> <mat-toolbar color="primary">Hints</mat-toolbar> <mat-card-content> <h4>Input</h4> <p> <mat-form-field class="demo-full-width"> <input matInput #characterCountInputHintExample placeholder="Character count (100 max)" maxLength="100" value="Hello world. How are you?"> <mat-hint align="end" aria-live="polite"> {{characterCountInputHintExample.value.length}} / 100 </mat-hint> </mat-form-field> </p> <h4>Textarea</h4> <p> <mat-form-field class="demo-full-width"> <textarea matInput #characterCountTextareaHintExample placeholder="Character count (100 max)" maxLength="100">Hello world. How are you?</textarea> <mat-hint align="end" aria-live="polite"> {{characterCountTextareaHintExample.value.length}} / 100 </mat-hint> </mat-form-field> </p> </mat-card-content> </mat-card> <mat-card class="demo-card demo-basic"> <mat-toolbar color="primary"> <span> Hello  <mat-form-field color="accent"> <input matInput [(ngModel)]="name" type="text" placeholder="First name"> </mat-form-field>, how are you? </span> </mat-toolbar> <mat-card-content> <p> <mat-form-field> <input matInput disabled placeholder="Disabled field" value="Value"> </mat-form-field> <mat-form-field> <input matInput required placeholder="Required field"> </mat-form-field> </p> <p> <mat-form-field style="width: 100%"> <input matInput placeholder="100% width placeholder"> </mat-form-field> </p> <p> <mat-form-field style="width: 100%"> <input matInput #input placeholder="Character count (100 max)" maxLength="100"> <mat-hint align="end" aria-live="polite">{{input.value.length}} / 100</mat-hint> </mat-form-field> </p> <p> <mat-form-field hintLabel="Hint label" style="width: 100%"> <input matInput placeholder="Show Hint Label"> </mat-form-field> </p> <p> <mat-form-field> <input matInput> <mat-placeholder> I <mat-icon>favorite</mat-icon> <b>bold</b> placeholder </mat-placeholder> <mat-hint> I also <mat-icon>home</mat-icon> <i>italic</i> hint labels </mat-hint> </mat-form-field> </p> <p> <mat-form-field hintLabel="Hint label" style="width: 100%"> <input matInput #hintLabelWithCharCount placeholder="Show Hint Label With Character Count"> <mat-hint align="end" aria-live="polite">{{hintLabelWithCharCount.value.length}}</mat-hint> </mat-form-field> </p> <p> <mat-form-field style="margin-bottom: 4em"> <textarea matInput #longHint placeholder="Enter text to count"></textarea> <mat-hint> Enter some text to count how many characters are in it. The character count is shown on the right. </mat-hint> <mat-hint align="end" style="white-space: nowrap" aria-live="polite"> Length: {{longHint.value.length}} </mat-hint> </mat-form-field> </p> <p> <mat-checkbox [(ngModel)]="color">Check to change the color:</mat-checkbox> <mat-form-field [color]="color ? 'primary' : 'accent'"> <input matInput [placeholder]="color ? 'Primary color' : 'Accent color'"> </mat-form-field> </p> <p> <mat-checkbox [(ngModel)]="requiredField"> Check to make required:</mat-checkbox> <mat-form-field> <input matInput [required]="requiredField" [placeholder]="requiredField ? 'Required field' : 'Not required field'"> </mat-form-field> </p> <p> <mat-checkbox [(ngModel)]="hideRequiredMarker">Check to hide the required marker:</mat-checkbox> <mat-form-field [hideRequiredMarker]="hideRequiredMarker" style="width: 300px"> <input matInput required [placeholder]="hideRequiredMarker ? 'Required Without Marker' : 'Required With Marker'"> </mat-form-field> </p> <p> <mat-button-toggle-group [(ngModel)]="floatingLabel"> <mat-button-toggle value="auto">Auto Float</mat-button-toggle> <mat-button-toggle value="always">Always Float</mat-button-toggle> <mat-button-toggle value="never">Never Float</mat-button-toggle> </mat-button-toggle-group> </p> <p> <mat-form-field [floatPlaceholder]="floatingLabel"> <input matInput placeholder="Placeholder"> </mat-form-field> </p> <p> <mat-form-field> <input matInput placeholder="Prefixed" value="example"> <div matPrefix>Example: </div> </mat-form-field> <mat-form-field class="demo-text-align-end"> <input matInput placeholder="Suffixed" value="123"> <span matSuffix>.00 €</span> </mat-form-field> <br/> Both: <mat-form-field class="demo-text-align-end"> <input matInput #email placeholder="Email Address" value="angular-core"> <span matPrefix><mat-icon [class.primary]="email.focused">email</mat-icon> </span> <span matSuffix [class.primary]="email.focused"> @gmail.com</span> </mat-form-field> </p> <p> Empty: <mat-form-field><input matInput></mat-form-field> <label>Label: <mat-form-field><input matInput></mat-form-field></label> </p> </mat-card-content> </mat-card> <mat-card class="demo-card demo-basic"> <mat-toolbar color="primary">Number Inputs</mat-toolbar> <mat-card-content> <table width="100%"> <thead> <td>Table</td> <td colspan="3"> <button (click)="addABunch(5)">Add 5</button> <button (click)="addABunch(10)">Add 10</button> <button (click)="addABunch(100)">Add 100</button> <button (click)="addABunch(1000)">Add 1000</button> </td> </thead> <tr *ngFor="let item of items; let i = index"> <td>{{i+1}}</td> <td> <mat-form-field> <input matInput type="number" placeholder="value" aria-label="hello" [(ngModel)]="items[i].value"> </mat-form-field> </td> <td> <input type="number" [(ngModel)]="items[i].value"> </td> <td>{{item.value}}</td> </tr> </table> </mat-card-content> </mat-card> <mat-card class="demo-card demo-basic"> <mat-toolbar color="primary">Forms</mat-toolbar> <mat-card-content> <mat-form-field><input matInput placeholder="reactive" [formControl]="formControl"> </mat-form-field> <mat-form-field> <input matInput placeholder="template" [(ngModel)]="model" required [disabled]="ctrlDisabled"> </mat-form-field> <button mat-raised-button color="primary" (click)="formControl.enabled ? formControl.disable() : formControl.enable()"> DISABLE REACTIVE CTRL </button> <button mat-raised-button color="primary" (click)="ctrlDisabled = !ctrlDisabled"> DISABLE TD CTRL </button> <div> <mat-form-field> <input matInput placeholder="delayed value" [formControl]="delayedFormControl"> </mat-form-field> </div> </mat-card-content> </mat-card> <mat-card class="demo-card demo-basic"> <mat-toolbar color="primary">Floating labels</mat-toolbar> <mat-card-content> <div> <mat-form-field> <input matInput [formControl]="placeholderTestControl"> </mat-form-field> <mat-form-field> <input matInput [formControl]="placeholderTestControl" placeholder="Only placeholder"> </mat-form-field> <mat-form-field> <mat-label>Only label</mat-label> <input matInput [formControl]="placeholderTestControl"> </mat-form-field> <mat-form-field> <mat-label>Label and placeholder</mat-label> <input matInput [formControl]="placeholderTestControl" placeholder="This is the placeholder"> </mat-form-field> <mat-form-field floatLabel="always"> <mat-label>Always float</mat-label> <input matInput [formControl]="placeholderTestControl" placeholder="This is the placeholder"> </mat-form-field> <mat-form-field floatLabel="never"> <mat-label>Never float</mat-label> <input matInput [formControl]="placeholderTestControl" placeholder="This is the placeholder"> </mat-form-field> <mat-form-field> <mat-label>Label and placeholder element</mat-label> <mat-placeholder>The placeholder element</mat-placeholder> <input matInput [formControl]="placeholderTestControl"> </mat-form-field> </div> <div> <mat-form-field> <mat-select [formControl]="placeholderTestControl"> <mat-option value="Value">Value</mat-option> </mat-select> </mat-form-field> <mat-form-field> <mat-select [formControl]="placeholderTestControl" placeholder="Only placeholder"> <mat-option value="Value">Value</mat-option> </mat-select> </mat-form-field> <mat-form-field> <mat-label>Only label</mat-label> <mat-select [formControl]="placeholderTestControl"> <mat-option value="Value">Value</mat-option> </mat-select> </mat-form-field> <mat-form-field> <mat-label>Label and placeholder</mat-label> <mat-select [formControl]="placeholderTestControl" placeholder="This is the placeholder"> <mat-option value="Value">Value</mat-option> </mat-select> </mat-form-field> <mat-form-field floatLabel="always"> <mat-label>Always float</mat-label> <mat-select [formControl]="placeholderTestControl" placeholder="This is the placeholder"> <mat-option value="Value">Value</mat-option> </mat-select> </mat-form-field> <mat-form-field floatLabel="never"> <mat-label>Never float</mat-label> <mat-select [formControl]="placeholderTestControl" placeholder="This is the placeholder"> <mat-option value="Value">Value</mat-option> </mat-select> </mat-form-field> <mat-form-field> <mat-label>Label and placeholder element</mat-label> <mat-placeholder>The placeholder element</mat-placeholder> <mat-select [formControl]="placeholderTestControl"> <mat-option value="Value">Value</mat-option> </mat-select> </mat-form-field> </div> <button mat-raised-button color="primary" (click)="togglePlaceholderTestValue()">Toggle value</button> <button mat-raised-button color="primary" (click)="togglePlaceholderTestTouched()">Toggle touched</button> </mat-card-content> </mat-card> <mat-card class="demo-card demo-basic"> <mat-toolbar color="primary">Textarea Autosize</mat-toolbar> <mat-card-content> <h3>Regular <textarea></h3> <textarea class="demo-textarea" matTextareaAutosize matAutosizeMaxRows="10"></textarea> <h3><textarea> with mat-form-field</h3> <div> <mat-form-field> <textarea matInput matTextareaAutosize matAutosizeMaxRows="10" placeholder="Autosized textarea"></textarea> </mat-form-field> </div> <h3><textarea> with ngModel</h3> <div> <label>Input with same ngModel <input [(ngModel)]="textareaNgModelValue"></label> </div> <label> Plain textarea with auto size <textarea matTextareaAutosize [(ngModel)]="textareaNgModelValue"></textarea> </label> </mat-card-content> </mat-card>