Swift and SwiftUI binding from TextField string to model's published, optional Integer property

Question

I'm new to Swift and SwiftUI and have a model with a @Published intValue optional and a view with a TextField where its text/string property is 2-way bound to intValue of the model. Need to make sure valid text entry as a string is converted to a valid integer for the model. What is the recommended approach to handle this in SwiftUI? Code is similar to below...

//Model
class AppModel:ObservedObject {
 @Published
 var intValue: Int? = 5
}

//View
@ObservedObject
 var appModel = AppModel.shared

TextField("", text: $appModel.intValue)
                    .keyboardType(.numberPad)

Updated sample code...

///////////
import SwiftUI

class Model: ObservableObject {
    static var shared: Model = Model()

    @Published
    var number: Int = 0

    init(){}

}

struct ContentView: View {
    var body: some View {
        TextFieldFormatter()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


struct TextFieldFormatter: View {
    @ObservedObject
    var model: Model = Model.shared

    @State private var number: Int = 0


    let formatter: NumberFormatter = {
        let numFormatter = NumberFormatter()
        numFormatter.numberStyle = .none
        return numFormatter
    }()

    var body: some View {
        VStack {
            Text("State").onTapGesture {
                self.endEditing()
            }
            TextField("int", value: $number, formatter: formatter).keyboardType(.numberPad)
            Text("Echo: \(number)")
            Text("Observable")
            TextField("int", value: $model.number, formatter: formatter).keyboardType(.numberPad)
            Text("Echo: \(model.number)")
        }
    }
}

struct TextFieldFormatter_Previews: PreviewProvider {
    static var previews: some View {
        TextFieldFormatter()
    }
}

extension View {
    func endEditing() {
        UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to:nil, from:nil, for:nil)
    }
}

Ken Mueller · Accepted Answer · 2020-02-06 02:45:05Z

12

You can create a custom Binding to pass in to the TextField.

This is how to construct a Binding<String> (what the TextField needs):

var string = ""

let myBinding = Binding(get: { string }) {
    string = $0
}

The first argument of the Binding constructor is the getter. This closure should return a value of the desired type.

The second argument is a setter. It is a closure that takes in the new value, and does something with it (usually set another value).

So, if you want to create a Binding<String> to pass in to the TextField that gets/sets appModel.intValue, you can create a Binding<String> and pass it into the TextField like this:

TextField("", text: .init(
    get: { self.appModel.intValue.map(String.init) ?? "" },
    set: { self.appModel.intValue = Int($0) }
))
.keyboardType(.numberPad)

answered Feb 6, 2020 at 2:45

Ken Mueller

4,2723 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Erik Peterson Over a year ago

Got an error Generic parameter T could not be inferred on map function. Made a few changes and came up with something that compiles, and updates, but editing the text field is problematic with this approach. Can append a digit but can't backspace delete digits. Here's the code I used. TextField("int", text: myBinding) let myBinding = Binding( get: { String(self.appModel.intValue)}, set: { self.appModel.intValue = (Int($0) ?? 5)})

Ken Mueller Over a year ago

Didn't you want appModel.intValue to be an optional?

lorem ipsum · Accepted Answer · 2020-02-06 09:34:58Z

4

SwiftUI's TextField has several Constructors. One of them takes a Formatter parameter.

https://developer.apple.com/documentation/swiftui/textfield

import SwiftUI

struct TextFieldFormatter: View {
    @ObservedObject var model: Model = Model.shared

    let formatter: NumberFormatter = {
        let numFormatter = NumberFormatter()
        numFormatter.numberStyle = .none
        return numFormatter
    }()

    var body: some View {
        VStack {
            Text("State").onTapGesture {
                self.endEditing()
            }
            TextField("int", value: $model.number, formatter: formatter).keyboardType(.numberPad)
            Text("Echo: \(model.number)")
            Text("Observable")
            TextField("int", value: $model.number, formatter: formatter).keyboardType(.numberPad)
            Text("Echo: \(model.number)")
        }
    }
}

struct TextFieldFormatter_Previews: PreviewProvider {
    static var previews: some View {
        TextFieldFormatter()
    }
}

Also, if you are trying to disable the screen with the onTapGesture you might consider.

adding:

   @State var disabled: Bool = false

and changing:

       Form {
            Text("Disable").onTapGesture {
                //self.endEditing()
                self.disabled = true
            }
            TextField("int", value: $model.number, formatter: formatter).keyboardType(.numberPad)
            Text("Echo: \(model.number)")
            Text("Observable")
            TextField("int", value: $model.number, formatter: formatter).keyboardType(.numberPad)
            Text("Echo: \(model.number)")
        }.disabled($disabled.wrappedValue)

Giving feedback while the user is typing can be done a few different ways but a custom UITextView in a UIViewRepresentable class seems to be the most common.

edited Feb 6, 2020 at 9:34

answered Feb 6, 2020 at 0:29

lorem ipsum

30.9k7 gold badges42 silver badges68 bronze badges

3 Comments

Erik Peterson Over a year ago

I updated the sample code with your code and added in @Observable object. The bound variable using state nor the model using observedobject still appears not update when a change is made to the textfield.

lorem ipsum Over a year ago

I made a minor change. Removing the State var and referencing the model.number it all works after you press Return

zrfrank Over a year ago

But for example, the new TextEditor only provide the Binding<String> constructor. Which makes thing cumbersome.

Collectives™ on Stack Overflow

Swift and SwiftUI binding from TextField string to model's published, optional Integer property

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related