Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
18 changed files
with
521 additions
and
219 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,101 +1,21 @@ | ||
<mat-toolbar color="primary"> Angular Material - File Input </mat-toolbar> | ||
|
||
<div class="main"> | ||
|
||
<h1>Code samples</h1> | ||
|
||
<form [formGroup]="formDoc" (ngSubmit)="onSubmit(formDoc)" novalidate> | ||
|
||
<h2>Simple input</h2> | ||
|
||
<app-code-sample [code]="simple"></app-code-sample> | ||
|
||
<mat-form-field> | ||
<ngx-mat-file-input formControlName="basicfile" placeholder="Basic Input"></ngx-mat-file-input> | ||
<mat-icon matSuffix>folder</mat-icon> | ||
</mat-form-field> | ||
|
||
<h2>Input with clear button</h2> | ||
|
||
<p> | ||
This is a workaround for an issue with Firefox that doesn't triggers change event when the user cancels the upload. With other browsers, it results in removing files from the input. | ||
</p> | ||
|
||
<app-code-sample [code]="removable"></app-code-sample> | ||
|
||
<p>Add a file to reveal the clear button.</p> | ||
|
||
<mat-form-field> | ||
<ngx-mat-file-input #removableInput formControlName="removablefile" placeholder="Removable Input"></ngx-mat-file-input> | ||
<button mat-icon-button matSuffix *ngIf="!removableInput.empty" (click)="removableInput.clear($event)"> | ||
<mat-icon>clear</mat-icon> | ||
</button> | ||
</mat-form-field> | ||
|
||
<h2>Input with validation: required and maxSize</h2> | ||
|
||
<app-code-sample [code]="advancedTs"></app-code-sample> | ||
<app-code-sample [code]="advanced"></app-code-sample> | ||
|
||
<mat-form-field> | ||
<ngx-mat-file-input | ||
formControlName="requiredfile" | ||
placeholder="Required input" | ||
valuePlaceholder="No file selected" | ||
required | ||
></ngx-mat-file-input> | ||
<mat-icon matSuffix>folder</mat-icon> | ||
<mat-error *ngIf="formDoc.get('requiredfile')?.hasError('required')"> Please select a file </mat-error> | ||
<mat-error *ngIf="formDoc.get('requiredfile')?.hasError('maxContentSize')"> | ||
The total size must not exceed {{ formDoc.get('requiredfile')?.getError('maxContentSize').maxSize | byteFormat }} | ||
({{ formDoc.get('requiredfile')?.getError('maxContentSize').actualSize | byteFormat }}). | ||
</mat-error> | ||
</mat-form-field> | ||
<pre>{{ formDoc.get('requiredfile')?.errors | json }}</pre> | ||
|
||
<h2>Disabled input</h2> | ||
|
||
<app-code-sample [code]="disabledTs"></app-code-sample> | ||
|
||
<mat-form-field> | ||
<ngx-mat-file-input formControlName="disabledfile" placeholder="Disabled Input"></ngx-mat-file-input> | ||
<mat-icon matSuffix>folder</mat-icon> | ||
</mat-form-field> | ||
|
||
<h2>Multiple input</h2> | ||
|
||
<app-code-sample [code]="multiple"></app-code-sample> | ||
|
||
<mat-form-field> | ||
<ngx-mat-file-input formControlName="multiplefile" placeholder="Multiple inputs" multiple></ngx-mat-file-input> | ||
<mat-icon matSuffix>folder</mat-icon> | ||
</mat-form-field> | ||
|
||
<h2>Input with file type constraint (accept)</h2> | ||
|
||
<app-code-sample [code]="accept"></app-code-sample> | ||
|
||
<mat-form-field> | ||
<ngx-mat-file-input formControlName="acceptfile" placeholder="PDF file only" [accept]="'.pdf'"></ngx-mat-file-input> | ||
<mat-icon matSuffix>folder</mat-icon> | ||
</mat-form-field> | ||
|
||
<h2>Input with custom ErrorStateMatcher</h2> | ||
<p>An ErrorStateMatcher defines, when a control displays the error state. A custom ErrorStateMatcher can for example be used to display validations on untouched controls. | ||
ErrorStateMatchers can either be defined globally or for single controls (seen in the following example). | ||
</p> | ||
|
||
<app-code-sample [code]="errorStateTs"></app-code-sample> | ||
<app-code-sample [code]="errorState"></app-code-sample> | ||
|
||
<mat-form-field> | ||
<ngx-mat-file-input formControlName="errorStateFile" placeholder="Shows error for PDF" [errorStateMatcher]="errorStateMatcher"></ngx-mat-file-input> | ||
</mat-form-field> | ||
|
||
<h2>ByteFormat pipe</h2> | ||
|
||
<app-code-sample [code]="bytePipe"></app-code-sample> | ||
|
||
<p>A file size of {{ maxSize }} gives a human readable size of {{ maxSize | byteFormat }}</p> | ||
</form> | ||
</div> | ||
<mat-toolbar color="primary"> | ||
<button mat-icon-button aria-label="Expand or collapse menu" (click)="menuOpened = !menuOpened"> | ||
<mat-icon>menu</mat-icon> | ||
</button> | ||
<span class="toolbar-title">Angular Material - File Input</span> | ||
</mat-toolbar> | ||
|
||
<mat-sidenav-container autosize> | ||
<mat-sidenav #sidenav [opened]="menuOpened" mode="side"> | ||
<app-menu></app-menu> | ||
</mat-sidenav> | ||
|
||
<div class="sidenav-content"> | ||
<div class="main"> | ||
<app-usage></app-usage> | ||
<br> | ||
<app-appearance></app-appearance> | ||
</div> | ||
</div> | ||
|
||
</mat-sidenav-container> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
mat-form-field { | ||
width: 100%; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
<h2 id="appearance">Form field appearance variants</h2> | ||
<p> | ||
File input appearance is fully compatible with <a | ||
href="https://material.angular.io/components/form-field/overview#form-field-appearance-variants" | ||
target="_blank">Angular Material form field appearance</a>. | ||
</p> | ||
<p class="warning"> | ||
There are significant differences between the legacy variant and the 3 newer ones (see link above). Especially, | ||
"standard, fill, and outline appearances do not promote placeholders to labels." This means you'll need to add the | ||
"mat-label" element if you want to show some text. | ||
</p> | ||
|
||
<form [formGroup]="formDoc" novalidate> | ||
|
||
<h3>Legacy (default)</h3> | ||
|
||
<app-code-sample [code]="legacyNoLabel"></app-code-sample> | ||
|
||
<mat-form-field appearance="legacy"> | ||
<ngx-mat-file-input formControlName="legacy" placeholder="Basic legacy placeholder"></ngx-mat-file-input> | ||
<mat-icon matSuffix>folder</mat-icon> | ||
</mat-form-field> | ||
|
||
<h3>Legacy (default) with mat-label</h3> | ||
|
||
<app-code-sample [code]="legacy"></app-code-sample> | ||
|
||
<mat-form-field appearance="legacy"> | ||
<mat-label>Basic legacy input</mat-label> | ||
<ngx-mat-file-input formControlName="legacy" placeholder="Basic legacy placeholder"></ngx-mat-file-input> | ||
<mat-icon matSuffix>folder</mat-icon> | ||
</mat-form-field> | ||
|
||
<h3>Standard</h3> | ||
|
||
<app-code-sample [code]="standard"></app-code-sample> | ||
|
||
<mat-form-field appearance="standard"> | ||
<mat-label>Basic standard input</mat-label> | ||
<ngx-mat-file-input formControlName="standard" placeholder="Basic standard placeholder"></ngx-mat-file-input> | ||
<mat-icon matSuffix>folder</mat-icon> | ||
</mat-form-field> | ||
|
||
<h3>Fill</h3> | ||
|
||
<app-code-sample [code]="fill"></app-code-sample> | ||
|
||
<mat-form-field appearance="fill"> | ||
<mat-label>Basic fill input</mat-label> | ||
<ngx-mat-file-input formControlName="fill" placeholder="Basic fill placeholder"></ngx-mat-file-input> | ||
<mat-icon matSuffix>folder</mat-icon> | ||
</mat-form-field> | ||
|
||
<h3>Outline</h3> | ||
|
||
<app-code-sample [code]="outline"></app-code-sample> | ||
|
||
<mat-form-field appearance="outline"> | ||
<mat-label>Basic outline input</mat-label> | ||
<ngx-mat-file-input formControlName="outline" placeholder="Basic outline placeholder"></ngx-mat-file-input> | ||
<mat-icon matSuffix>folder</mat-icon> | ||
</mat-form-field> | ||
|
||
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
||
import { AppearanceComponent } from './appearance.component'; | ||
|
||
describe('AppearanceComponent', () => { | ||
let component: AppearanceComponent; | ||
let fixture: ComponentFixture<AppearanceComponent>; | ||
|
||
beforeEach(async(() => { | ||
TestBed.configureTestingModule({ | ||
declarations: [ AppearanceComponent ] | ||
}) | ||
.compileComponents(); | ||
})); | ||
|
||
beforeEach(() => { | ||
fixture = TestBed.createComponent(AppearanceComponent); | ||
component = fixture.componentInstance; | ||
fixture.detectChanges(); | ||
}); | ||
|
||
it('should create', () => { | ||
expect(component).toBeTruthy(); | ||
}); | ||
}); |
Oops, something went wrong.