ChatGPT vs. SwiftUI. Not that I’m worried, but… | by Michael Long | Dec, 2022

Not that I’m worried, but…

photo by andrea de santis Feather unsplash

ChatGPT is a demonstration project of OpenAI One who can talk on many subjects. including programming.

Let’s take it through its paces, shall we?

All that comes from this point forward is my input signal, followed by ChatCGP’s responses, complete with sample code.

Hey ChatGpt, Can you create a SwiftUI entry form with Name, Address, City, State and Zip fields?

Sure! Here’s a simple example of a form in SwiftUI that has fields for a person’s name, address, city, state, and zip code:

import SwiftUI

struct EntryForm: View
@State private var name: String = ""
@State private var address: String = ""
@State private var city: String = ""
@State private var state: String = ""
@State private var zipCode: String = ""

var body: some View
Form
TextField("Name", text: $name)
TextField("Address", text: $address)
TextField("City", text: $city)
TextField("State", text: $state)
TextField("Zip code", text: $zipCode)


in this instance, EntryForm conforms to the structure View protocol and defines body property that returns a Form sight. Form scene is included TextField views for each form field, and @State Property wrappers are used to manage the state of each field.

Can you move the field to the view model?

Yes, you can move the form fields into a separate view model to better manage the state and logic of the form. Here’s an example of what it might look like:

import SwiftUI

struct EntryForm: View
@ObservedObject var viewModel: EntryFormViewModel

var body: some View
Form
TextField("Name", text: $viewModel.name)
TextField("Address", text: $viewModel.address)
TextField("City", text: $viewModel.city)
TextField("State", text: $viewModel.state)
TextField("Zip code", text: $viewModel.zipCode)


class EntryFormViewModel: ObservableObject
@Published var name: String = ""
@Published var address: String = ""
@Published var city: String = ""
@Published var state: String = ""
@Published var zipCode: String = ""

in this instance, EntryForm one in the structure @ObservedObject property that references an instance EntryFormViewModel Class. it allows EntryForm to bind to the view model’s properties using view $ prefix, as it did with @State properties in the previous example.

EntryFormViewModel class defines @Published Properties for each form field, which allows the view to be notified when the values ​​of these properties change. This allows the view to automatically update when the user changes a form field.

This approach helps keep view logic and state management separate from the view, making the code easier to understand and maintain.

What if I need to validate that none of the fields are empty?

If you need to verify that none of the fields in the form are empty, you can add a method to EntryFormViewModel Class that checks the values ​​of form fields and returns a Bool Indicates whether the form is valid or not. Here’s an example of what it might look like:

class EntryFormViewModel: ObservableObject 
@Published var name: String = ""
@Published var address: String = ""
@Published var city: String = ""
@Published var state: String = ""
@Published var zipCode: String = ""

var isValid: Bool
return !name.isEmpty && !address.isEmpty && !city.isEmpty && !state.isEmpty && !zipCode.isEmpty

in this instance, isValid property uses isEmpty property of each form field to determine if the form is valid. If all fields are not empty, then isValid property will return trueotherwise it will return false,

You can use this property to enable or disable the submit button, for example, or to display an error message if the form is not valid.

struct EntryForm: View 
@ObservedObject var viewModel: EntryFormViewModel

var body: some View
Form
TextField("Name", text: $viewModel.name)
TextField("Address", text: $viewModel.address)
TextField("City", text: $viewModel.city)
TextField("State", text: $viewModel.state)
TextField("Zip code", text: $viewModel.zipCode)

if !viewModel.isValid
Text("All fields are required")
.foregroundColor(.red)



in this instance, EntryForm checks the value of view isValid properties and, if the form is not valid, it displays an error message using a Text sight. This allows the user to know which fields need to be filled in to make the form valid.

Can we add save button in that form?

yes you can add a save button to the form using a Button see in EntryForm structure. Here’s an example of what it might look like:

struct EntryForm: View 
@ObservedObject var viewModel: EntryFormViewModel

var body: some View
Form
TextField("Name", text: $viewModel.name)
TextField("Address", text: $viewModel.address)
TextField("City", text: $viewModel.city)
TextField("State", text: $viewModel.state)
TextField("Zip code", text: $viewModel.zipCode)

if !viewModel.isValid
Text("All fields are required")
.foregroundColor(.red)

Button(action:
// Save the form data here
)
Text("Save")

.disabled(!viewModel.isValid)


in this instance, EntryForm scene contains a Button View with an action closure that is called when the button is tapped. This closure can be used to save form data to a database or other storage location.

Button there is also a view disabled modifier that disables the button if isValid property of EntryFormViewModel Is false, This ensures that the form must be filled in correctly by the user before the data can be saved.

Total elapsed time: 2 minutes.

This article took a long time to format.

closing clause

I’m not sure what else to say…

Leave a Reply