Angular-Formly: Defining the Label and Description for the Primary Selection Element

I'm currently using the Angular Formly library (http://angular-formly.com/) and I've hit a roadblock while trying to add a description under the label of a Select dropdown.

app.controller('CalcCtrl', function CalcCtrl(formlyVersion, formlyValidationMessages) {
var vm = this;
// function assignment
vm.onSubmit = onSubmit;

// variable assignment
vm.model = {

};

vm.fields = [

  {
    key: 'am_quant_lg',
    type: 'input',
    templateOptions: {
      required: true,
      label: 'Large',
      description: 'Description of my input field is here',
      type: 'number',
      max: '100',
      maxMessage: 'test ',
    },
  },
  {
    key: 'House_type',
    type: 'select',
    templateOptions: {
      required: true,
      label: 'What type of House you need?',
      options: [{
          name: 'Townhouse',
          value: 1,
        },
        {
          name: 'Single',
          value: 2,
        },]
      },
  },

I'm looking to include some descriptive text under the label 'What type of house you need?' – perhaps a few lines. I've successfully added descriptions to input text fields, as shown above, and I know how to add descriptions to other options. I just need assistance with the main Select element.

Answer №1

It seems like this information is not explicitly mentioned in the documentation, but you can still include it in the following manner;


{
 "key": "House_style",
 "type": "dropdown",
 "templateDetails": {
 "isRequired": true,
 "text": "What style of house are you looking for?",
 "helpText": "Additional information can be added here.",
 "choices": [
 { "name": "Modern", "value": 1 },
 { "name": "Victorian", "value": 2 },
 ]
 }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing a Variety of Textures and Images in a Three.js Scene

I am utilizing THREE.js to showcase a 3D spinning globe in the web browser. Along with that, I intend for an image to display around the rotating globe. Despite attempting to use the provided function, var img = new THREE.ImageLoader(); img.load("texture/ ...

Issues with properly triggering re-clicking events in AngularJS when using Bootstrap modal

I am currently utilizing Angular JS in combination with Bootstrap modal. Below is the Anchor link I am referring to: <li><a href="#" data-toggle="modal" data-target="#inviteFriendModal" ><span class="frndInvt"></span>Invite Friends ...

SSL-enabled Websocket server powered by websocket.io

I have built a basic Websocket server using node.js and websocket.io var ws = require('websocket.io') , server = ws.listen(8000); server.on('connection', function (socket) { console.log("connected"); socket.on('message&ap ...

Struggling to access specific data within a JSON object? Wondering how to extract and display data from a JSON object in VUE?

Despite my extensive searching on Stack and the internet, I have not been able to find a solution to my problem. Currently, I am attempting to retrieve data from a JSON file located in the Vue src folder. The file contains three arrays with names that inc ...

Implementing Firebase storage with AngularJS to bind images

Looking for assistance with displaying an image in an AngularJS view from a reference in Firebase Storage. I am able to retrieve the URL and print it in the console, but having trouble accessing it in the view. Service Code function getImageUrl(image) { ...

Capturing HTML form values and storing them in my JavaScript data object

I have a JS object with preset data as shown below in the variable var json. I am trying to create a simple HTML web form where I want the user inputs to be added as a new data set within my initial JS object. Here is the initial JS object data. The submi ...

Creating an overlay with CSS hover on a separate element and the ::before pseudo class

Issue: I am struggling to display the overlay when hovering over the circle element, rather than just the image itself. I have attempted to achieve this using CSS, but can't seem to make it work as intended. Any guidance and examples using JavaScript ...

Purge React Query Data By ID

Identify the Issue: I'm facing a challenge with invalidating my GET query to fetch a single user. I have two query keys in my request, fetch-user and id. This poses an issue when updating the user's information using a PATCH request, as the cach ...

The jQuery Masonry design is experiencing issues when the browser window is resized, causing disruptions in the fluid and seamless

Check out my video where I explain the issue at hand. Apologies for the slow frame rate. It seems that when I resize the browser window too quickly, the Masonry jQuery plugin struggles to keep up and ends up breaking the layout. Some items end up below th ...

I'm currently facing an issue with toggling the visibility of a div using JavaScript

In my attempt to create a unique custom select menu using html, css, and javascript, I encountered an issue with toggling the display style of the div containing the options when clicking on the button (in this case, an arrow). HTML: <ul class="de ...

The beta version of Angular 2.0 introduces the BrowserDomAdapter for easy access to the DOM

I have a Component in Angular 2.0 that is attempting to utilize the DOM Adapter API from Angular's BrowserDomAdapter documentation. The initialization of this DomAdapter can be found here. However, I am uncertain about whether the Dom Adapter needs t ...

Sails encountering CORS preflight error due to cross-origin request

I am new to creating hybrid apps and have been following some tutorials. However, I encountered these errors on my browser console: Refused to load the script 'http://192.168.1.142:35729/livereload.js?snipver=1' due to Content Security Policy di ...

What are the reasons for avoiding placing CSS code directly within HTML?

Situation: My website is dynamically served, with all CSS and javascript directly embedded into the HTML document to optimize speed. Advantages: Reduces web requests Fewer files downloaded Speeds up webpage loading time Disadvantages: Potential cachin ...

What is the best way to align HTML inputs within a grid, whether it be done automatically or manually using JavaScript?

Arrange 20 HTML inputs with various data types into grid-columns as the user inputs data. Ensure that the grid container has div elements correctly positioned for output. ...

Hover over or click to automatically focus on the input field

I have an icon that triggers focus on an input field when hovered over. I also want the same functionality to occur when the user clicks on the icon. if(!mobile){ $('#search-icon').hover( function(){ if($('.sear ...

Transforming S3 Buffer Information into a PDF Document

Utilizing an express route to fetch the s3 object through the AWS SDK: router.get('/myRoute', (req, res) => { const s3 = new AWS.S3({apiVersion: '2006-03-01'}); s3.getObject({Bucket: 'my-bucket', Key: 'my-key'}, ...

Attempting to obtain a score value from the input, but unsuccessful in doing so

Prior to posing this question, I had already managed to successfully retrieve the score value. Below is my original script: <script> $.ajax({ type: "POST", url: "https://example.com/paylist.php?acc=useraccount&json=1", ...

Encountering an undefined array within a click function nested inside a for loop

Being a newbie in this field, I seem to have overlooked a simple detail. The for loop is functioning correctly, but within it, I encounter an issue with an undefined variable. var categories_info = ["history","excellence","art","social","facilities","p ...

Get a file from a node.js web server by clicking a button to initiate the download

I am a beginner in nodejs and I am working on creating a web server using nodejs to host some static files. Here is the code I have used for this purpose: var http = require('http'); var finalhandler = require('finalhandler'); var ser ...

What are some strategies for creating a website that caters to both web crawlers and users of single page applications?

Let's get down to the specifics. I've got a frontend website at (don't worry, it's not porn). If you have javascript enabled, the URL becomes [this uses jquery/ajax load]. If you're without javascript, the URL remains as . To ...