Skip to content

Add disabled attribute to select? #415

Closed
@sharpmachine

Description

@sharpmachine

Hi there,

I'd like the first option of a select field to act more a placeholder, like 'Select a source'. The issue I don't want this to be a valid option. Currently with angular schema form it will validate as successful.

I'm thinking I need to add a 'disabled' attribute to it, but don't know how to do with angular schema form.

Activity

stramel

stramel commented on Jun 3, 2015

@stramel
Contributor

@sharpmachine This seems related to #216 unless I misunderstood what you were trying to get at.

sharpmachine

sharpmachine commented on Jun 3, 2015

@sharpmachine
Author

Hi, I've tried the suggestion in the original issue and it's not exactly working. It's not selecting N/A as the default. It just adds a blank option:

screen shot 2015-06-03 at 4 44 39 pm

Here's my code:

  var createTitleMap = function(x, arr) {
    var result = [];
    result.push({name: x, value:'?'});
    for(var i = 0; i < arr.length; i++) {
      result.push({name: arr[i], value:arr[i]});
    }
    return result;
  };

    var races = ['White', 'Black or African American', 'American Indian or Alaskian Native', 'Asian', 'Native Hawaiian or other Pacific Islander', 'Hispanic or Latino', 'Other', 'Unknown'];

  $scope.subjectBasicInfoForm = [
    {
      key: 'firstName',
      type: 'input'
    },
    {
      key: 'middleName',
      type: 'input'
    },
    {
      key: 'lastName',
      type: 'input'
    },
    {
      key: 'dateOfBirth',
      type: 'date',
      title: 'Date of Birth'
    },
    {
      key: 'gender',
      type: 'radios'
    },
    {
      key: 'race',
      type: 'select',
      titleMap: createTitleMap('N/A', races),
    },
    {
      type: 'template',
      templateUrl: 'views/templates/next_pager.tmpl.html',
      nextLabel: 'Contact Info',
      nextState: 'subject.edit.contactInfo'
    }
  ];

  $scope.subjectContactInfoForm = [
    {
      key: 'streetAddress',
      type: 'input'
    },
    {
      key: 'secondaryAddress',
      type: 'input'
    },
    {
      key: 'city',
      type: 'input'
    },
    {
      key: 'state'
    },
    {
      key: 'county',
      type: 'input'
    },
    {
      key: 'zipCode',
      type: 'input'
    },
    {
      key: 'cellPhone',
      type: 'input'
    },
    {
      key: 'homePhone',
      type: 'input'
    }
  ];

  $scope.subjectSchema = {
    type: 'object',
    properties: {
      firstName: {
        type: 'string',
        title: 'First Name',
        validationMessage: 'Gotta have a first name',
        minLength: 2
      },
      middleName: {
        type: 'string',
        title: 'Middle Name'
      },
      lastName: {
        type: 'string',
        title: 'Last Name'
      },
      dateOfBirth: {
        type: 'date',
        title: 'Date of Birth'
      },
      gender: {
        type: 'string',
        title: 'Gender',
        enum: ['Male', 'Female']
      },
      race: {
        type: 'string',
        title: 'Race',
        enum: races
      },
      streetAddress: {
        type: 'string',
        title: 'Address'
      },
      secondaryAddress: {
        type: 'string',
        title: 'Secondary Address'
      },
      city: {
        type: 'string',
        title: 'City'
      },
      state: {
        type: 'string',
        title: 'State',
        default: 'CA',
        enum: [
         'CA',
         'WA',
         'MT',
         'TX'
        ]
      },
      county: {
        type: 'string',
        title: 'County'
      },
      zipCode: {
        type: 'string',
        title: 'Zip Code'
      },
      cellPhone: {
        type: 'string',
        title: 'Cell Phone'
      },
      homePhone: {
        type: 'string',
        title: 'Home Phone'
      }
    },
    required: [
      'firstName'
    ]
  };
davidlgj

davidlgj commented on Jun 12, 2015

@davidlgj
Contributor

It's not a disabled attribute you want but an extra option tag. I've been working of and on merging this PR #294 that fixes it. But I like a bit cleaner solution to the problem. I can't give any estimates on when, but its coming.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Add disabled attribute to select? · Issue #415 · json-schema-form/angular-schema-form