Search code examples
swiftswiftuiuitextfieldswiftui-form

How to auto fill a text field in SwiftUI?


I'm making an app that uses a form in SwiftUI, and I'd like to edit the objects stored locally using said forms.

In this case, I have a cake and a cookie to be stored in memory and I have two structs, one for cake and one for cookie.

When the user chooses which one he/she wants to edit, the cake or the cookie, the form fields should be automatically filled with the properties of the actually stored cake or cookie that can be edited.

The structs are:

import Foundation

struct Cake {
    var name : String
    var style : String
    var decorations : String
}

struct Cookie{
    var name : String
    var style : String
}

The code I use for the view is:

import SwiftUI

struct EditingForm: View {
    @State var cake : Cake = Cake(name: "Caprese", style: "Chocolate cake made with almonds flour", decorations: "Powdered Sugar")
    
    @State var cookie : Cookie = Cookie(name: "Chocolate Chip", style: "Cookie made with chocolate chips")
    
    @State var group : String = "Cake"
    @State var nameCake : String = ""
    @State var nameCookie : String = ""
    @State var styleCake : String = ""
    @State var cookiesChocolateChipsType : String = ""
    
    var body: some View {
        ZStack{
            Form{
                Section(header: Text("Sweet Details")
                ){
                    Menu("Select the sweet you want to edit") {
                        Button(action: {
                            group = "Cake"
                        }) {
                            Text("Cake")
                        }.foregroundColor(.black)
                        
                        Button(action: {
                            group = "Cookie"
                        }) {
                            Text("Cookie")
                        }
                    }
                }
                
                Section(header: Text("Decorations")
                ){
                    if(group == "Cake"){
                        TextField("Name of the cake", text: $nameCake)
                        TextField("Style of the cake", text: $styleCake)
                    } else if (group == "Cookie"){
                        TextField("Name of the cookie", text: $nameCookie)
                        TextField("Type of chocolate chips for the cookie", text: $cookiesChocolateChipsType)
                    }
                }
            }
        }
    }
    
}

Solution

  • You can simply use the .onAppear() {} modifier. That means, that your @State var gets an update, when the View appeared.

    In your example the code will look like:

    import SwiftUI
    
    struct EditingForm: View {
        @State var cake : Cake = Cake(name: "Caprese", style: "Chocolate cake made with almonds flour", decorations: "Powdered Sugar")
        
        @State var cookie : Cookie = Cookie(name: "Chocolate Chip", style: "Cookie made with chocolate chips")
        
        @State var group : String = "Cake"
        @State var nameCake : String = ""
        @State var nameCookie : String = ""
        @State var styleCake : String = ""
        @State var cookiesChocolateChipsType : String = ""
        
        var body: some View {
            ZStack{
                Form{
                    Section(header: Text("Sweet Details")
                    ){
                        Menu("Select the sweet you want to edit") {
                            Button(action: {
                                group = "Cake"
                            }) {
                                Text("Cake")
                            }.foregroundColor(.black)
                            
                            Button(action: {
                                group = "Cookie"
                            }) {
                                Text("Cookie")
                            }
                        }
                    }
                    
                    Section(header: Text("Decorations")
                    ){
                        if(group == "Cake"){
                            TextField("Name of the cake", text: $nameCake).onAppear() {
                              self.nameCake = self.cake.name
                            }
                            TextField("Style of the cake", text: $styleCake).onAppear() {
                              self.styleCake = self.cake.style
                            }
                        } else if (group == "Cookie"){
                            TextField("Name of the cookie", text: $nameCookie).onAppear() {
                              self.nameCookie = self.cookie.name
                            }
                            TextField("Type of chocolate chips for the cookie", text: $cookiesChocolateChipsType).onAppear() {
                              self.cookiesChocolateChipsType = self.cookie.style
                            }
                        }
                    }
                }
            }
        }
        
    }
    

    Hope that'll help solving your problem.