Merge pull request #116 from microsoft/propagateMaxLengthInFabText

Propagate max length attribute in fab-text-field component

Author: zavidor

apps/demo/src/app/app.component.html

@@ -47,7 +47,9 @@ <h2>Getting up and running...</h2>
 <fab-icon iconName="Add" (onClick)="onClickEventHandler($event)" (onMouseOver)="onMouseOverEventHandler($event)">
 </fab-icon>
 
-<fab-text-field [(value)]="textFieldValue"></fab-text-field>
+<div>------------------------------------------------------------</div>
+<fab-text-field maxLength="15" [(value)]="textFieldValue"></fab-text-field>
+<div>------------------------------------------------------------</div>
 
 <span>{{ textFieldValue }}</span>
 

libs/core/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../../node_modules/ng-packagr/package.schema.json",
   "name": "@angular-react/core",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "ngPackage": {
     "deleteDestPath": true,
     "whitelistedNonPeerDependencies": [

libs/fabric/src/lib/components/text-field/base-text-field.component.ts

@@ -65,6 +65,8 @@ export class FabBaseTextFieldComponent extends ReactWrapperComponent<ITextFieldP
   @Input() renderPrefix?: InputRendererOptions<ITextFieldProps>;
   @Input() renderSuffix?: InputRendererOptions<ITextFieldProps>;
 
+  @Input() maxLength: number;
+
   @Output() readonly onClick = new EventEmitter<MouseEvent>();
   @Output() readonly onFocus = new EventEmitter<FocusEvent>();
   @Output() readonly onBlur = new EventEmitter<Event>();

libs/fabric/src/lib/components/text-field/text-field.component.ts

@@ -57,6 +57,7 @@ import { FabBaseTextFieldComponent } from './base-text-field.component';
       [RenderSuffix]="renderSuffix"
       [Change]="onChangeHandler"
       [BeforeChange]="onBeforeChangeHandler"
+      [maxLength]="maxLength"
       [NotifyValidationResult]="onNotifyValidationResultHandler"
       (onClick)="onClickHandler($event)"
       (onFocus)="onFocusHandler($event)"