How to observe a TextField value with SwiftUI and Combine?

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'

score 22 · Accepted Answer · answered Sep 26 '19 at 12:55

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)
    }
}

score 8 · Answer 2 · answered Mar 28 '20 at 11:49

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)
    }
}

There's a caveat. The `sink` is emitted before the value is changed. If you need the value after it is updated, refer to https://samwize.com/2020/06/03/subscribing-to-published/. — samwize, Jun 03 '20 at 05:06

score 4 · Answer 3 · answered Jan 05 '20 at 12:37

4

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

answered Jan 05 '20 at 12:37

abanet

1,217
15
20

Not the best option to use, Combine makes it easier. – evya Apr 15 '20 at 06:07
1

@evya, could you explain how? I'd prefer to use Combine! – abanet Apr 15 '20 at 07:04

score 2 · Answer 4 · answered Jun 24 '19 at 11:30

2

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

@State var value: String = ""

answered Jun 24 '19 at 11:30

Lu_

2,447
17
24

I also tried to use didSet for a State var, but it did not work – Sorin Lica Jun 24 '19 at 11:39
why are you trying dot set Did set? remove `$value.sink { (val) in print(val) }` and leave just a print and it will work – Lu_ Jun 24 '19 at 11:52
1

$value contains the whole textfield value, while ```$value.publisher().sink { }``` let you do something at each keystroke. Check my posted answered. – kontiki Jun 24 '19 at 12:53
1

Not working for me as I think `$value.publisher().sink { }` is deprecated in Beta 6. Do you have any other solution how to observe TextField value – Evana Sep 03 '19 at 03:37
1

@Evana it's still there just call `value.publisher.sink { }`. – Mark Aug 29 '20 at 10:23

How to observe a TextField value with SwiftUI and Combine?

4 Answers4

Linked