What causes the variance in behavior between the Angular-formly directive and type?

I am facing an issue with two input fields that are both generated using the same template. I have set the required attribute to true for both of them by using the following code snippet:

...    
templateOptions: {
  ...
  required: true
}

One input field is registered through the formlyConfig.setType method, while the other is registered using a directive. To demonstrate this issue, I have created a JS Bin here.

However, only the first input field is displaying the required attribute, while the second one is not. According to the documentation on custom templates (controller option), it states:

Provides you the ability to add custom behavior to the type without having to make an entire directive (you can make a directive instead if you wish).

Can anyone help me identify what mistake I might be making in this scenario?

javascriptangularjsangular-formly

Answer №1

When angular-formly processes the options with a template in the second example, it only sees <plain-text>. As a result, it is unable to determine which element should have the required attribute applied. This is because angular-formly will only add attributes like this to elements that have an ng-model, as these are the only elements where the attribute is appropriate.

The important thing to note is what angular-formly perceives when processing the template (before compilation), rather than what the directive compiles to. While using your own directive is possible, if you want to take advantage of angular-formly's features, it must incorporate the ng-model controller (similar to the directive used in this example).

Best of luck!

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

Do I have to additionally check the data type using typeof when implementing PropTypes in my code?

I have a custom method called onNotifyChange that is triggered in the onChange event of an input element. This method has been defined with a PropType of func. MyComponent.propTypes = { onNotifyChange: PropTypes.func, } When invoking the onNotifyCha ...

javascriptreactjsreact-proptypes

The issue of dynamic select not sending the POST data

Having an issue with a form where the selected country and city are not being posted correctly. Despite different names in the form and php mailer script, both selections are coming through as the country. Here's the form: <select style="width: 6 ...

javascriptphpforms

Is it possible to initiate validation on an HTML element without the presence of a form?

Is it possible to trigger validation on an HTML element without using a form? For example, I have set the required attribute on a field, but when I click the Save button, the field doesn't display the red outline indicating validation failure. I susp ...

javascripthtml

The event was triggered, however, some sections of the code did not run

I am currently working on a project called lan-info on GitHub. Here is the code snippet that I am using: let arpSweepCommand = './arpSweep.sh'; app.get('/arp', (req, res) => { console.log('we have a working signal!'); ...

javascriptjquerynode.jsexpress

Encountering Reference Error while Using AWS Amplify with Nuxt.js: Navigator Undefined

Currently, I am experimenting with Nuxt.js and AWS Amplify to leverage the benefits of SSR/SEO for my project. I have successfully integrated Amplify into my project and followed the "Manual Configuration" steps outlined in the Amplify Docs to set it up. ...

javascriptamazon-web-servicesvue.jsvuejs2nuxt.js

Typescript's way of mocking fetch for testing purposes

I have a query regarding the following code snippet: import useCountry from './useCountry'; import { renderHook } from '@testing-library/react-hooks'; import { enableFetchMocks } from 'jest-fetch-mock'; enableFetchMocks(); i ...

javascripttypescriptjestjs

Load styles in Nuxt asynchronously to improve performance

Is there a way to load styles asynchronously on the website or insert them in the footer? I am currently using Nuxt version 2.0.0 Here's what I have tried so far: Adding a plugin in webpack called async-stylesheet-webpack-plugin. However, this res ...

javascriptvue.jsnuxt.js

Capture an entire webpage screenshot with Webdrivercss

When trying to capture a screenshot of an entire webpage, I encountered a challenge. The code I used below with Firefox successfully took a screenshot of the whole page, but it didn't work with Chrome. According to the API documentation, I should use ...

javascriptselenium-webdriverwebdriver

Is SWR failing to provide outdated data?

My understanding was that SWR should display the cached data upon page load before refreshing with new information from the API. However, in my Next.js app with a simple API timeout, the "loading" message appears every time due to the 5-second delay I adde ...

javascriptreactjsnext.jsswr

Ensure accurate detection of invalid values for SVG Elements in React using jest testing framework

When testing my react app, I am attempting to capture any errors that are thrown or logged to the console. If a regular HTML element such as <p> contains invalid attributes like <p color={false}></p>, react will display an error via cons ...

javascriptreactjsunit-testingsvgjestjs

Generating Unique Random Numbers with JavaScript

Is there a way to generate 5 unique random lottery numbers using JavaScript? I've been working on the code below, but can't seem to figure out how to ensure there are no duplicate numbers in the final selection. I tried adding conditionals and lo ...

javascriptrandomduplicatesnumbers

Achieving success with the "silent-scroll" technique

I've been struggling to implement the 'scroll-sneak' JavaScript code for quite some time now. This code is designed to prevent the page from jumping to the top when an anchor link is clicked, while still allowing the link to function as inte ...

javascriptjqueryhtmlcss

Determine the active animation on an element using jQuery or JavaScript

Can you provide the code for the know_anim() function that can determine which animation is currently running on the '#div' element? Check out the jsFiddle link for reference:https://jsfiddle.net/himavicii/bL0nsjeL/ function moveLeft() ...

javascriptjquery

Obtaining the text content of a <div> element when clicked using Selenium

I am trying to extract the email address from the code snippet below, but I am unsure of how to do it. Any assistance would be greatly appreciated! <div class="taLnk hvrIE6 fl" onclick="ta.trackEventOnPage('Listing', 'Email', 774169 ...

javascriptjavahtmlselenium

Differences between utilizing computed variables versus useState and useEffect

Is there any downside to initializing a computed variable instead of using useState/useEffect to track it when its value can be fully derived from another property? Let's consider the following example: /** * ex paymentAmounts: [100, 300, 400] */ co ...

javascriptreactjsuse-effectuse-state

I am having trouble retrieving the information stored in an Array of Objects. Specifically, I am having difficulty accessing and iterating through each object using a for

Is there a way to extract data from an API individually and retrieve data from an Array? let {Array}=jsonData fetch("https://apis.ccbp.in/city-bikes?bike_name" + search, options) .then(function(response){ return response.json(); }) .then(funct ...

javascripthtmlcss

Unforeseen behavior in the definition of requirejs

This first snippet of code is functional: define([ 'jquery', 'underscore', 'backbone' ], function($, _, Backbone,home_template) { var HomeView = Backbone.View.extend({ render: function() { ...

javascriptjquerybackbone.jsunderscore.jsrequire

The installation of "npm" was completed successfully, however there seems to be an issue when

I am currently facing an issue while trying to set up http-server, bower, and grunt on my Windows machine. After successfully installing them using npm install, I encountered a 'command not found' error when attempting to run the commands. Even a ...

javascriptnpm

The issue with fancybox links not functioning properly within ajax content

I'm looking to constantly update a specific section on my website using ajax, jquery, and php. Upon the initial page load, a javascript function is triggered to display the content of that section. Subsequently, json is utilized to check for any new ...

javascriptjqueryajaxfancybox

Crafting callback functions

My jQuery code looks like this: $('#current_image').fadeOut(function(){ $('#current_image').attr('src',newImage).show(); }); This process is wonderful - the nested function runs smoothly after the fadeOut. I ...

javascriptjquerycallbackjquery-events