How to use the material-components-web.textField function in material-components-web

$(document).ready(function () {

    // Initialize variables
    drawer = new mdc.drawer.MDCPersistentDrawer(document.querySelector('#main-drawer'));
    refreshIntervalTextfield = new mdc.textField.MDCTextField(document.querySelector('#refresh-interval-tf-div'));

    // Register event listeners
    $('.idcc-toolbar-menu').on('click', function () {
        drawer.open = !drawer.open;
    });

    const activatedClass = 'mdc-list-item--selected';
    $('.mdc-drawer__drawer').on('click', function (event) {
        var target = event.target;
        while (target && !$(target).hasClass('mdc-list-item')) {
            target = target.parentElement;
        }
        if (target) {
            $('.' + activatedClass).removeClass(activatedClass);
            $(event.target).addClass(activatedClass);
            setMainContent(target.id);

const MDCTextField = require('material-components-web').textField.MDCTextField;

module.exports = {
  template: require('./password.edit.html'),
  bindings: {
    field: '<',
    onFieldChanged: '&'
  },
  controller: ['$element', '$timeout', function($element, $timeout) {
    this.$postLink = function() {
      this.textField = new MDCTextField($element.find('.mdc-text-field')[0]);
    };

    this.$onChanges = function() {
      $timeout(function() {
        if (this.field.value) {
          this.textField.value = this.field.value;

var moment = require('moment')
  , MDCTextField = require('material-components-web').textField.MDCTextField
  , MDDateTimePicker = require('../../vendor/md-date-time-picker');

module.exports = {
  template: require('./datetime.component.html'),
  bindings: {
    date: '<',
    fieldName: '@',
    onDatePicked: '&'
  },
  controller: DateTimeController
};

DateTimeController.$inject = ['$element', '$timeout', 'LocalStorageService'];

function DateTimeController($element, $timeout, LocalStorageService) {
  var dateInputField;

$('#poa-info-name').text("N/A");
    $('#demo-svc-info-duration').text("N/A");

    targetedUeNameDialogTextfield = new mdc.textField.MDCTextField(document.querySelector('#targeted-ue-name-tf-div'));
    //setting a default value for now
    targetedUeNameDialogTextfield.value = "ue2-ext";
    targetedUeNameDialogTextfield.valid = true;
    $('#targeted-ue-name-tf-div').hide();

    targetedUeAppNameDialogTextfield1 = new mdc.textField.MDCTextField(document.querySelector('#targeted-ue-app-name-1-tf-div'));
    //setting a default value for now
    targetedUeAppNameDialogTextfield1.value = "ue1";
    targetedUeAppNameDialogTextfield1.valid = true;
    $('#targeted-ue-app-name-1-tf-div').hide();

    targetedUeAppNameDialogTextfield2 = new mdc.textField.MDCTextField(document.querySelector('#targeted-ue-app-name-2-tf-div'));
    //setting a default value for now
    targetedUeAppNameDialogTextfield2.value = "ue2-ext";
    targetedUeAppNameDialogTextfield2.valid = true;
    $('#targeted-ue-app-name-2-tf-div').hide();

    //ues are starting by default in zone1 and poa1, so hardcoded because the subscriptions are only sent after the tracking starts 
    //and this app only tracks notifications, not queries where they are located
    //a work-around would be to have the demo-server do a get for the location knowing it is registering for the event, and then fake
    //a notification to trigger the app
    defaultUserInfo1("ue1", "zone1 / zone1-poa1")
    defaultUserInfo2("ue2-ext", "zone1 / zone1-poa1")

    iperfBwDialogTextfield = new mdc.textField.MDCTextField(document.querySelector('#iperf-bw-tf-div'));
    iperfBwDialogTextfield.valid = true;

    ueStateApi.getUeState(targetedUeNameDialogTextfield.value, initTrafficBwCb);

const MDCTextField = require('material-components-web').textField.MDCTextField;

module.exports = {
  template: require('./number.edit.html'),
  bindings: {
    field: '<',
    onFieldChanged: '&'
  },
  controller: ['$element', '$timeout', function($element, $timeout) {
    this.$postLink = function() {
      this.textField = new MDCTextField($element.find('.mdc-text-field')[0]);
      if (Object.prototype.hasOwnProperty.call(this.field, 'min') && !Object.prototype.hasOwnProperty.call(this.field, 'max')) {
        this.helperText = 'Must be greater than ' + this.field.min;
      } else if (!Object.prototype.hasOwnProperty.call(this.field, 'min') && Object.prototype.hasOwnProperty.call(this.field, 'max')) {
        this.helperText = 'Must be less than ' + this.field.max;
      } else if (Object.prototype.hasOwnProperty.call(this.field, 'min') && Object.prototype.hasOwnProperty.call(this.field, 'max')) {
        this.helperText = 'Must be between ' + this.field.min + ' and ' + this.field.max;

const MDCTextField = require('material-components-web').textField.MDCTextField;

module.exports = {
  template: require('./email.edit.html'),
  bindings: {
    field: '<',
    onFieldChanged: '&'
  },
  controller: ['$element', '$timeout', function($element, $timeout) {
    this.$postLink = function() {
      this.textField = new MDCTextField($element.find('.mdc-text-field')[0]);
      if (this.field.value)
        this.textField.value = this.field.value;
    }

    this.$onChanges = function() {
      $timeout(function() {

var _ = require('underscore')
  , $ = require('jquery')
  , moment = require('moment')
  , MDCRipple = require('material-components-web').ripple.MDCRipple
  , MDCTopAppBar = require('material-components-web').topAppBar.MDCTopAppBar
  , MDCTextField = require('material-components-web').textField.MDCTextField;

module.exports = function observationView() {
  var directive = {
    restrict: "E",
    template:  require('./observation-view.directive.html'),
    scope: {
      observation: '=observation',
      event: '=event'
    },
    controller: ObservationViewController
  };

  return directive;
};
ObservationViewController.$inject = ['$scope', '$element', '$uibModal', 'EventService', 'UserService', 'LocalStorageService', '$timeout', 'MapService'];

var _ = require('underscore')
  , $ = require('jquery')
  , moment = require('moment')
  , MDCRipple = require('material-components-web').ripple.MDCRipple
  , MDCTextField = require('material-components-web').textField.MDCTextField;

module.exports = function observationNewsItem() {
  var directive = {
    restrict: "A",
    template:  require('./observation-feed.directive.html'),
    scope: {
      observation: '=observationNewsItem',
      event: '=event',
      form: '=selectedObservationForm'
    },
    controller: ObservationNewsItemController
  };

  return directive;
};

const MDCTextField = require('material-components-web').textField.MDCTextField;

module.exports = {
  template: require('./text.edit.html'),
  bindings: {
    field: '<',
    onFieldChanged: '&'
  },
  controller: ['$element', '$timeout', function($element, $timeout) {
    this.$postLink = function() {
      this.textField = new MDCTextField($element.find('.mdc-text-field')[0]);
    };

    this.$onChanges = function() {
      $timeout(function() {
        if (this.field.value) {
          this.textField.value = this.field.value;

var MDCTextField = require('material-components-web').textField.MDCTextField;

module.exports = {
  template: require('./textarea.edit.html'),
  bindings: {
    field: '<',
    onFieldChanged: '&'
  },
  controller: ['$element', '$timeout', function($element, $timeout) {
    this.$postLink = function() {
      this.textField = new MDCTextField($element.find('.mdc-text-field')[0]);
    };
    this.$onChanges = function() {
      $timeout(function() {
        if (this.field.value) {
          this.textField.value = this.field.value;
        }