Lesson 8: Forms and User Inputs

Objective:

Learn how to create forms and handle user inputs.

Content:

1. TextField and SecureField

Using TextField and SecureField for text input.

Text Input:

@State private var username = ""
@State private var password = ""

var body: some View {
    Form {
        TextField("Username", text: $username)
        SecureField("Password", text: $password)
    }
}

Explanation:

@State private var username = "": Declares a state variable to hold the username.
@State private var password = "": Declares a state variable to hold the password.
Form: Creates a form view.
TextField("Username", text: $username): Creates a text field for the username.
SecureField("Password", text: $password): Creates a secure field for the password.

Handling Input Changes:

@State private var email = ""

var body: some View {
    VStack {
        TextField("Enter your email", text: $email)
            .padding()
            .border(Color.gray, width: 1)
        Text("Email: \(email)")
    }
}

Explanation:

VStack: Arranges its children vertically.
TextField("Enter your email", text: $email): Creates a text field for email input.
.padding(): Adds padding around the text field.
.border(Color.gray, width: 1): Adds a gray border around the text field.
Text("Email: \(email)"): Displays the entered email below the text field.

2. TextEditor

Using TextEditor for multi-line text input.

Multi-line Text Input:

@State private var bio = "Enter your bio..."

var body: some View {
    TextEditor(text: $bio)
        .frame(height: 150)
        .padding()
        .border(Color.gray, width: 1)
}

Explanation:

@State private var bio = "Enter your bio...": Declares a state variable to hold the bio text.
TextEditor(text: $bio): Creates a text editor for multi-line text input.
.frame(height: 150): Sets the height of the text editor to 150 points.
.padding(): Adds padding around the text editor.
.border(Color.gray, width: 1): Adds a gray border around the text editor.

3. Other Input Components

Using Toggle, Slider, and Stepper for different types of user inputs.

Toggle, Slider, Stepper:

@State private var isOn = false
@State private var volume = 0.5
@State private var count = 0

var body: some View {
    Form {
        Toggle("Enable Feature", isOn: $isOn)
        Slider(value: $volume, in: 0...1)
        Stepper("Count: \(count)", value: $count)
    }
}

Explanation:

@State private var isOn = false: Declares a state variable to hold the toggle state.
@State private var volume = 0.5: Declares a state variable to hold the slider value.
@State private var count = 0: Declares a state variable to hold the stepper value.
Toggle("Enable Feature", isOn: $isOn): Creates a toggle switch for enabling a feature.
Slider(value: $volume, in: 0...1): Creates a slider for adjusting the volume between 0 and 1.
Stepper("Count: \(count)", value: $count): Creates a stepper for adjusting the count value.

Example Form:

@State private var name = ""
@State private var age = 18

var body: some View {
    Form {
        Section(header: Text("Personal Information")) {
            TextField("Name", text: $name)
            Stepper("Age: \(age)", value: $age, in: 0...100)
        }

        Section {
            Button("Submit") {
                print("Name: \(name), Age: \(age)")
            }
        }
    }
}

Explanation:

Section(header: Text("Personal Information")): Creates a section with a header.
TextField("Name", text: $name): Creates a text field for entering the name.
Stepper("Age: \(age)", value: $age, in: 0...100): Creates a stepper for adjusting the age.
Section { Button("Submit") { print("Name: \(name), Age: \(age)") } }: Creates a section with a submit button that prints the entered name and age.

4. Form Validation and Error Handling

Implementing validation logic to handle user input errors.

Validating Inputs:

@State private var email = ""
@State private var showError = false

var body: some View {
    Form {
        TextField("Email", text: $email)
            .autocapitalization(.none)
            .keyboardType(.emailAddress)

        if showError {
            Text("Invalid email address")
                .foregroundColor(.red)
        }

        Button("Submit") {
            if isValidEmail(email) {
                showError = false
                // Submit form
            } else {
                showError = true
            }
        }
    }
}

func isValidEmail(_ email: String) -> Bool {
    // Simple email validation logic
    return email.contains("@") && email.contains(".")
}

Explanation:

@State private var email = "": Declares a state variable to hold the email address.
@State private var showError = false: Declares a state variable to control the visibility of the error message.
TextField("Email", text: $email): Creates a text field for the email address.
.autocapitalization(.none): Disables automatic capitalization for the text field.
.keyboardType(.emailAddress): Sets the keyboard type to email address.
if showError { Text("Invalid email address").foregroundColor(.red) }: Displays an error message if showError is true.
Button("Submit") { if isValidEmail(email) { showError = false } else { showError = true } }: Validates the email address and shows or hides the error message when the button is tapped.
func isValidEmail(_ email: String) -> Bool { return email.contains("@") && email.contains(".") }: Defines a simple email validation function.

Advanced Validation:

@State private var password = ""
@State private var confirmPassword = ""
@State private var showPasswordError = false

var body: some View {
    Form {
        SecureField("Password", text: $password)
        SecureField("Confirm Password", text: $confirmPassword)

        if showPasswordError {
            Text("Passwords do not match")
                .foregroundColor(.red)
        }

        Button("Submit") {
            if password == confirmPassword {
                showPasswordError = false
                // Submit form
            } else {
                showPasswordError = true
            }
        }
    }
}

Explanation:

@State private var password = "": Declares a state variable to hold the password.
@State private var confirmPassword = "": Declares a state variable to hold the confirmed password.
@State private var showPasswordError = false: Declares a state variable to control the visibility of the password error message.
SecureField("Password", text: $password): Creates a secure field for the password.
SecureField("Confirm Password", text: $confirmPassword): Creates a secure field for the confirmed password.
if showPasswordError { Text("Passwords do not match").foregroundColor(.red) }: Displays an error message if showPasswordError is true.
Button("Submit") { if password == confirmPassword { showPasswordError = false } else { showPasswordError = true } }: Validates the passwords and shows or hides the error message when the button is tapped.

Lesson 9: Animations with SwiftUI