Taking a Look at ChatGPT
I wrote an article last week about AI and what it is and isn’t. I mentioned Chat-GPT, and I wanted to follow up. I’ve played around with Chat-GPT and I want to know what it can do. So, I figured I’d give it a small test. For some context, I typically give myself a prompt when I start writing or think about what I want to write about. For this test, I wanted to take one of my older articles and give that prompt to Chat-GPT. We can compare and contrast how a human writes vs a language model.
The Article
I’m going to use this article as a test. You can go through and compare and contrast my article with Chat-GPTs article. Here is the article I’m using: https://www.techusolutions.com/blog/2022/03/12/angular-basics-using-forms-in-angular
In order to get Chat-GPT to generate an article like this I’ll give it the following simple prompt.
Write an article teaching users how to use forms in Angular.
The following is what Chat-GPT gave me.
(Everything in between the dividers was generated by Chat-GPT)
Angular is a powerful and popular JavaScript framework that is widely used to develop dynamic and robust web applications. One of the most important features of Angular is the ability to create and use forms. Forms are essential for collecting user data, validating user input, and submitting data to the server. In this article, we will go over the basics of forms in Angular and how to use them effectively.
Getting Started with Forms in Angular
Angular provides two ways of creating forms: template-driven forms and reactive forms. In this article, we will focus on template-driven forms, which are simpler to set up and use. Template-driven forms rely on Angular directives to create and manage the form elements.
To get started with template-driven forms in Angular, you first need to create a new Angular project. You can use the Angular CLI to create a new project by running the following command in your terminal:
ng new my-appOnce you have created a new project, you can navigate to the app.component.html file and add a form element. A basic form element in HTML consists of a form tag and one or more form controls, such as input elements. Here's an example:
This form has a single input field for the user’s name and a submit button. The required attribute on the input element specifies that the field must be filled in before the form can be submitted.
Creating a Form in Angular
To create a form in Angular, you need to use the ngForm directive. The ngForm directive is a container for all the form controls and provides services for tracking the form's state and submitting the form data.
Here’s how to create a simple form in Angular:
In this example, we’ve added the #myForm="ngForm" attribute to the form tag. This creates a reference to the form and binds it to the ngForm directive. We've also added the [(ngModel)] directive to the input element, which binds the input's value to a variable called name in the component class.
Validating Form Input
Angular provides several built-in validators that you can use to validate user input. Validators are functions that take a form control as input and return a validation error if the input is invalid.
To add validation to an input field, you can use the ngModel directive with the ngModelGroup directive. Here's an example:
In this example, we’ve added the ngModelGroup directive to the div tag to group the form controls under the user object. We’ve also added a validation message using the *ngIf directive to show an error message if the name field is invalid and has been touched by the user.
The myForm.controls['user']?.controls['name'] expression refers to the form control for the name field. The invalid property checks if the field is invalid, and the touched property checks if the user has interacted with the field.
Handling Form Submission
When the user submits the form, Angular generates a ngSubmit event that you can handle in your component class. Here's how to handle the form submission:
In this example, we’ve added the (ngSubmit)="onSubmit()" attribute to the form tag. This binds the ngSubmit event to a method called onSubmit() in the component class.
Here’s an example of how to handle the form submission in the component class:
In this example, the onSubmit() method logs the value of the name variable to the console. You can use the form data to send a request to the server or update the application state.
Conclusion
Forms are an essential part of web applications, and Angular provides a powerful and flexible way to create and use forms. In this article, we’ve covered the basics of creating a form in Angular, adding validation to form input, and handling form submission. With these skills, you can create complex and user-friendly forms that improve the user experience of your application.
(End of Chat-GPT article)
My Thoughts
I wasn’t expecting more than a paragraph or two, so I was actually impressed with this output. I did a small amount of formatting to make it look good on Medium, but I did not change any of the content it wrote. This whole thing took about a minute for it to type out. I probably spent an hour or so writing the original article, so it definitely gets a point for speed.
Let’s get into the nitty-gritty of it and critique the article a bit more. Before we do, I want to point out that the prompt I gave it was pretty simplistic and straightforward. It cannot think outside the box that I’ve put it in with my prompt.
Flow
How well does the article flow? Honestly, it flows pretty well. It starts with creating an Angular app and then using it to build out a form. It follows a logical progression and is pretty easy to read.
Accuracy
So this article was kind of correct, but lacking a lot of detail. If you look at the code in the Validating Form Input section, you’ll find this code.
One issue I have is that it didn’t use the [formControl] or [formGroup] with the input or the form. While you don’t HAVE to do that, it’s best practice if you’re opting to use forms.
Another issue I have is that it did not explain it fully. It has the line myForm.controls['user']… but it doesn’t explain that myForm (I’m guessing) is a Form Group, and the controls are Form Controls. It didn’t even show any of the component code. Then in the Handling Form Submission section, it gave us this.
This would likely confuse a reader wondering where the hell myForm came from since that was just never explained.
Conclusion
I was really impressed with what Chat-GPT gave me. I think if I tweak the prompt and add a lot more detail, I’ll be able to get something more like my original article. Chat-GPT is an incredibly powerful tool that can do some amazing things. I’d strongly encourage you to play around with it and you can even use my prompt and tweak it to see what you get.
