How to Custom form inputs with ControlValueAccessor

tldr;

There are times when the default inputs available to us in the browser don’t meet our needs or need to be included in a reusable Angular component. You may want to create a custom checkbox or radio button, or just want to use a card with a button as a form input. In any of these situations, you can use the Control Value Accessor to allow an Angular component to communicate with your form. In this article, we’ll look at an example of using control value accessor.

Okay, Here’s the Situation

Bonus points if you get the reference for the heading of this section. 😉

I was recently working on a form where the user was going to need to select an option, and only one option, like you would normally use a radio button for. This is what it looked like:

The user will choose one of these items, and when they select it the form goes to another step. I needed their selection to be stored as a value in the form as well. I could have used an Output that patched the value of the form, but I wanted it to be more semantic and obvious about what was going on. To get the value to store in the form, I needed a custom form input, where each of the above cards was the input. I could wrap them in an Angular component and loop over a list of options that were available to the user.

This is where I remembered a talk from Jennifer Wadella at ng-conf 2019 that talked about using ControlValueAccessor. There is a lot of content out there, and I encourage you to read more about it (and watch the video from Jennifer’s talk). This example will not go into all the details of what ControlValueAccessor can do, but it will give you an example and get you started.

Solution

The first step in creating our custom input with control value accessor is to implement the ControlValueAccessor interface. This requires us to implement three methods: writeValue, registerOnChange, and registerOnTouched.

export class CustomInputComponent implements ControlValueAccessor {
    @Input() option: any;

  onChanged: Function = () => {};
  onTouched: Function = () => {};

  registerOnChange(fn: Function) {
    this.onChanged = fn;
  }

  registerOnTouched(fn: Function) {
    this.onTouched = fn;
  }

  writeValue(value: any): void {}
}

registerOnChange

This sets the callback function that the forms API will call when the form value changes. You must provide a function that you will call when the user interacts with the input and the value should be changed. In this case, when the user interacts with our component and we want to update the changed value, we will call this.onChanged(value);.

registerOnTouched

This is similar to the registerOnChange method, but runs when the input is touched by the user. To register the touch, we will call this.onTouched();.

onWriteValue

This method is used to write a new value to the element. In my case, I didn’t need to implement this method, but you may need to do something like this in your case:

writeValue(value: any): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
}

This would write the value that is passed in to the method to the native input’s value in the DOM.

setDisabledState

This is an optional method that you can implement, and it allows you to run a block of code when the forms API sets the input to or from disabled.

Setting the Providers for the Component

After implementing the required methods for the ControlValueAccessor interface we need to set some providers for the component. The providers are set in an array in the component metadata:

export const CUSTOM_CONROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInputComponent),
    multi: true,
};

@Component({
  selector: 'app-custom-input',
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.css'],
  providers: [CUSTOM_CONROL_VALUE_ACCESSOR]
}) 

Essentially this turns our component into the custom input for the forms API to interact with.

Interacting with the Component

Now that we have our card (as shown above) and the ControlValueAccessor is implemented, we need to make sure that the user can select the input by clicking on the “Choose this Option” button. This part is pretty simple, though. All we need to do is run a function when the click event occurs, something like this:

<!-- custom-input.component.html -->
<button (click)="onChanged(option.id)">Choose this Option</button>

Now when the user clicks on the button, the form’s value will update to the value of option.id.

Setting the formControlName

Now that we have our custom input, we need to implement it in the parent component with the form. This is actually easy as well after doing the other work. If you’ve set up your ControlValueAccessor, all you need to do is add the formControlName attribute to the component in the HTML file.

<!-- app.component.html -->
<form [formGroup]="form">
    <app-custom-input *ngFor="let option of options" [option]="option" formControlName="option" ></app-custom-input>
</form>

As long as your FormGroup has an attribute called option, then clicking on the card will set the option’s ID as the value in the form.

Demo App

You can check out this StackBlitz for a working example of this custom input component using control value accessor.

Conclusion

I have been working with reactive forms for a few years now, and only just implemented ControlValueAccessor for the first time. You may not need to use this technique frequently, but in the case that you do need to implement it, don’t worry about the difficulty. In just a few steps (as outlined above) you can get it working.

I’ve shown the example of using reactive forms, but the steps above should work the same if you’re using template driven forms. Instead of using formControlName on the <app-custom-input> tag, you’ll use [(ngModel)].

Original article source at: https://www.prestonlamb.com/

#angular #input #value 

What is GEEK

Buddha Community

Fynzo Customer Feedback Software For Cafes, Hotels, Saloons, Spa!

Customer Feedback Tool | Fynzo online customer feedback comes with Android, iOS app. Collect feedback from your customers with tablets or send them feedback links.

Visit page for more information: https://www.fynzo.com/feedback

#CustomerFeedbackSystem
#PowerfulCustomerFeedbackSystem
#freecustomerfeedbacktools
#automatedcustomerfeedbacksystem
#customerfeedbacktools
#customerratingsystem
#Customerfeedbackmanagement

#customer feedback system #powerful customer feedback system #free customer feedback tools #automated customer feedback system #customer feedback tools #customer rating system

Laravel 8 Form Example Tutorial - Complete Guide

Laravel 8 form example. In this tutorial, i would love to show you how to create form in laravel. And how to insert data into database using form in laravel 8.

How to Submit Form Data into Database in Laravel 8

1. Step 1 – Install Laravel 8 Application
2. Step 2 – Configuring Database using Env File
3. Step 3 – Create Model & Migration File For Add Blog Post Form
4. Step 4 – Create Routes
5. Step 5 – Creating Controller
6. Step 6 – Create Blade File For Add Blog Post Form
7. Step 7 – Start Development Server
8. Step 8 – Run Laravel 8 Form App On Browser

https://laratutorials.com/laravel-8-form-example-tutorial/

#insert form data into database using laravel #laravel bootstrap form #laravel post forms #laravel 8 form tutorial #laravel 8 form example #laravel 8 form submit tutorial

How to Design Login Page using Xamarin Forms C# | Login Form | Sign In UI Design

#xamarin
#aspdotnetexplorer
https://www.youtube.com/watch?v=2tehSdX897E

#xamarin forms #xamarin forms bangla tutorials for beginners #xamarin forms tutorials for beginners #xamarin #xamarin.forms #xamarin.forms ui

Is Tech Making or Breaking Your Customer Experience?

Technology can be a two-edged sword. It can deliver incredible results and create unique problems. The customer experience (CX) sector, in particular, has been heavily impacted by technology for quite some time.

Just because you’re using customer relationship management (CRM) tech, doesn’t mean it’s working, though. Here are a few questions to ask yourself to see if your tech is making or breaking your customer’s experience.

Is Your Customer Service Organized?

Are You Ignoring Phone Calls for Other Tech?

Is Your Customer Experience too Tech-Centric?

Is Your Customer Experience Obsessed with Speed?

…

#customer-experience #customer-service #technology #tech #customer-support #customer-engagement #bus #customer-support-chatbots

Custom Mobile App Development Services Company in USA

AppClues Infotech is the best custom mobile app development company in USA. We offer custom mobile app development services in USA to effectively solve your business purpose.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#custom mobile app development #custom app development services #custom app development company in usa #custom mobile app developers in usa #custom app development agency in usa #hire custom mobile app developers