angular-material2

I'm working on angular 2 material app, I have a case where there is multiselect element and in that I have a list with checkbox so I can select multiple items at a time. I'm able to to that with angular material component, but what I want is 2-3 items to be checked by default, and if I select/deselect a particular item, then I should get checked/selected flag as true/false. <md-select multiple="true" [(mgModel)]="test"> <md-option *ngFor="let l of list" [value]="l"> {{l.name}} </md-option> </md-select> var list = [{name:'abc'},{name:'cbv'},{name:'hgf'},{name:'rty'},{name:'fdv'},{name:'vbg'}]

How do I validate that a mat-chip has been added to the mat-chip-list . I am using ReactiveForms. I have tried with the required validator. The value can be a list of names, so I need to make sure that there is atleast 1 name in my list of names before I can submit the form. If the list is empty then mat-error should display the error message. Using the required validator makes the form invalid, regardless of adding names to the list. EDIT: Reactive Forms I have tried to make a custom validator, and I am now using Reactive Forms instead of Template driven forms, but I cannot get it to work. I

I am trying to create an input field that expands at least in width dynamically with the length of the string the user entered, probably even multiline. Is that possible with an input element in Angular Material 2? With the textarea field from Angular Material 2 I only managed to expand the textarea in height, not in width with the following code: <mat-form-field (keydown.enter)="onEnter()" floatPlaceholder="never"> <textarea matInput placeholder="Autosize textarea" matTextareaAutosize matAutosizeMinRows="1" matAutosizeMaxRows="8"> </textarea> </mat-form-field> also on StackBlitz . In case of

I a working on angular 4.4 + material beta12 custom component and not able to figure out what is wrong in my implementation I am trying to achieve the below custom input Task: set value to formControl, once I got data from server(data.productTeam is data-can see in code) on edit, formcontrol should be updated with values (eg:P12DT2H231M) Issues: I am not able to bind default value to formcontrol. Without ngDefaultControl (No value accessor for form control with name: 'productTeam' error occuring) dashboard.component.js this.CRForm = this.fb.group({ productTeam: [data.productTeam || ''] }); In

I have a form that represents an address and I'm using mat-select for the state/province. Unfortunately it's not autofilling the state/province (I'm assuming because it's not a native select). Here is my markup: <mat-form-field> <mat-select placeholder="State" [(ngModel)]="state" autocomplete="billing address-level1"> <mat-option *ngFor="let s of states" [value]="s.abbreviation">{{ s.name }}</mat-option> </mat-select> </mat-form-field> I'm not sure if I'm missing something or if the browsers autofill isn't working because mat-select isn't a native control. Anyone have any idea how to make

I'm trying to use a custom theme but I keep getting the error: { "status": 1, "file": "/home/adam/Projects/test-material/src/unicorn.scss", "line": 1, "column": 1, "message": "File to import not found or unreadable: ~@angular/material/theming.\nParent style sheet: /home/adam/Projects/test-material/src/unicorn.scss", "formatted": "Error: File to import not found or unreadable: ~@angular/material/theming.\n Parent style sheet: /home/adam/Projects/test-material/src/unicorn.scss\n on line 1 of src/unicorn.scss\n>> @import '~@angular/material/theming';\n ^\n" } I've installed a brandy new Angular