Custom Form Inputs with ControlValueAccessor

I recently saw on Twitter that OpenAI had a new feature called ChatGPT. The info page for ChatGPT says that it’s a model that was trained to be more conversational. It is designed to be able to “ask follow up questions, admit mistakes, challenge incorrect premises, and reject inappropriate requests”. The role of AI in the future of coding is something that fascinates me. GitHub Copilot is perhaps the biggest example of what AI can do for developers and the amount of time saved. ChatGPT appears to be a tool that can be just as helpful for developers in the future.

I wanted to try out this new chat feature to see what it could do in the realm of answering developer questions. I think this is one of the areas where AI can be the biggest help, both to newcomers and seasoned developers alike. If you can type a question into a chat and have it put a coherent answer together, the time savings and benefits are incredible. So I put it to the test!

JavaScript filter Method Question

The first question I asked was about JavaScript’s filter method. Here’s the question I asked:

How do I filter an array of items in javascript where the score is higher than 10

And here’s the response, exactly as it came back:

To filter an array of items in JavaScript, you can use the filter() method. This method takes a callback function as an argument, which is called for each element in the array. The callback function should return true for each element that you want to keep, and false for each element that you want to remove.

Here is an example of how you can use the filter() method to filter an array of items where the score is higher than 10:

// The array of items that you want to filter
const items = [  { name: 'Item 1', score: 5 },  { name: 'Item 2', score: 15 },  { name: 'Item 3', score: 10 },  { name: 'Item 4', score: 20 }];

// Use the filter() method to filter the items
const filteredItems = items.filter(item => item.score > 10);

// The filtered array will only contain the items with a score higher than 10
console.log(filteredItems);
// Output: [{ name: 'Item 2', score: 15 }, { name: 'Item 4', score: 20 }]

Note that the filter() method does not modify the original array. It returns a new array containing only the elements that pass the test implemented by the callback function. You can save this new array to a variable, as shown in the example above.

Review of the Answer

This was more than I truly even hoped for in a response to the question. I didn’t know what I’d get, but that was a great answer, complete with a code sample. I didn’t add the code formatting to the response; that’s how it came back!

This was a great response, but I wanted to see if it could get a little more advanced and specific by answering a question about template refs in Angular.

Template Refs in Angular Question

This is the question I asked the second time, in relation to template refs:

how do I get access to a template reference in an angular component

And here’s the response that I got:

To get access to a template reference in an Angular component, you can use the @ViewChild decorator. The @ViewChild decorator allows you to access the template reference and use its properties and methods in the component class.

Here is an example of how you can use the @ViewChild decorator to get access to a template reference in an Angular component:

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <input #myInput type="text">
    <button (click)="logInputValue()">Log Input Value</button>
  `
})
export class MyComponent {
  @ViewChild('myInput') myInput: ElementRef;

  logInputValue() {
    console.log(this.myInput.nativeElement.value);
  }
}

In the example above, we have a template with an input element and a button. The input element has a template reference variable called #myInput. We use the @ViewChild decorator to access this template reference in the component class, and we save it to a property called myInput.

When the button is clicked, the logInputValue() method is called. This method uses the nativeElement property of the myInput template reference to access the value of the input element, and then logs it to the console.

Note that the @ViewChild decorator returns a ElementRef object, which represents a reference to an Angular element in the template. In order to access the properties and methods of the element, you need to use the nativeElement property of the ElementRef object.

Review of the Answer

I was impressed by the filter method, but shocked by the depth of this answer. ViewChild and template refs in Angular are a moderately advanced topic, but this chat answered the question perfectly.

Conclusion

This ChatGPT product has the potential to save developers a lot of time. If you could pop in, ask your question, and be given a correct answer to get you moving, the hours of googling will be virtually eliminated. I still believe that AI will not be replacing developers any time soon, but the help that can be provided to us is only just beginning. I think we’ll see impressive steps in the near future.

If you want to check out this new feature, go to chat.openai.com. You have to create a free account to test it out, but it was a pretty easy sign up process.