Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add Support for appearance for <mat-form-field> using JSON

See original GitHub issue

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request

Current behavior Currently there are no option to select appearance for <mat-form-field>

Expected behavior allow option to select appearance.

Minimal reproduction of the problem with instructions

https://material.angular.io/components/form-field/overview#form-field-appearance-variants

What is the motivation / use case for changing the behavior? { key: ‘text’, type: ‘input’, templateOptions: { label: ‘Text’, placeholder: ‘Placeholder’, required: true, appearance: ‘legacy’ | ‘standard’ | ‘fill’ | ‘outline’ } }

Please tell us about your environment:

Angular version: 6.0.X

Issue Analytics

State:
Created 5 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

8reactions

aitboudadcommented, May 20, 2019

@intellix pass the desired appearance through MAT_FORM_FIELD_DEFAULT_OPTIONS provider, here is a working example https://stackblitz.com/edit/angular-xdtrcl

3reactions

aitboudadcommented, Aug 24, 2018

already supported check the following example https://stackblitz.com/edit/angular-dyxzi9

Top Results From Across the Web

Form field appearance variants - StackBlitz

<mat-label>Legacy form field</mat-label>. <input matInput placeholder="Placeholder">. <mat-icon. matSuffix>sentiment_very_satisfied</. mat-icon>.

Submit a form with angular to Json file - Stack Overflow

Bind your form-control with [(ngModel)] to an object that you declare in your ts. In the onSubmit() method do whatever you have to...

Changing Angular Material Form Field Appearance

In this post, we are going to look at how you can change the default appearance of Angular Material Form Field Component.

Angular dynamic forms - Medium

Here in element and type, You can add more elements and types. In the dynamic form component we are creating all the form...

mat-table filter example: Search & Filter mat-table in Angular

Step 2: Add filter function ; mat-form-field appearance="standard"> ; mat-label> ; mat-label> ; input matInput (keyup)="applyFilter($event)" placeholder="Search ...