How to observe a TextField value with SwiftUI and

Question

I'm trying to execute an action every time a textField's value is changed.

@Published var value: String = ""

var body: some View {            
     $value.sink { (val) in
        print(val)
     }
     return TextField($value)       
}

But I get below error.

Cannot convert value of type 'Published' to expected argument type 'Binding'

Answer 1

If you want to observe value then it should be a State

@State var value: String = ""

Answer 2

This should be a non-fragile way of doing it:

class MyData: ObservableObject {
    var value: String = "" {
        willSet(newValue) {
            print(newValue)
        }
    }
}

struct ContentView: View {
    @ObservedObject var data = MyData()
    var body: some View {
        TextField("Input:", text: $data.value)
    }
}

Answer 3

I don't use combine for this. This it's working for me:

 TextField("write your answer here...",
            text: Binding(
                     get: {
                        return self.query
                       },
                     set: { (newValue) in
                        self.fetch(query: newValue) // any action you need
                                return self.query = newValue
                      }
            )
  )

I have to say it's not my idea, I read it in this blog: SwiftUI binding: A very simple trick

Answer 4

In your code, $value is a publisher, while TextField requires a binding. While you can change from @Published to @State or even @Binding, that can't observe the event when the value is changed.

It seems like there is no way to observe a binding.

An alternative is to use ObservableObject to wrap your value type, then observe the publisher ($value).

class MyValue: ObservableObject {
  @Published var value: String = ""
  init() {
    $value.sink { ... }
  }
}

Then in your view, you have have the binding $viewModel.value.

struct ContentView: View {
    @ObservedObject var viewModel = MyValue()
    var body: some View {
        TextField($viewModel.value)
    }
}