基于文本字段输入的 RxSwift 启用/禁用按钮

Question

我必须使用 RxSwift MVVM 实现以下场景

我有两个文本字段（OTP 和确认 OTP）和一个提交按钮，如果用户在 OTP 文本字段上没有值时单击 OTP 文本字段，那么提交按钮应该被禁用，现在如果用户在 otp 文本字段按钮中键入内容应该启用。现在，如果用户点击第二个文本字段，因为它现在是空白的，那么按钮应该再次被禁用，并且只有在有值时才会启用。

所以基本上我想通过检查来启用/禁用按钮：

1. 如果 OTP 字段有值，则启用按钮，如果没有值则禁用它
2. 用户点击确认 OTP 字段，现在它是空的，所以再次禁用该按钮
3. 如果用户从 OTP 字段中删除值，请再次禁用按钮（因为它是空的，与 Confirm OTP 字段相同）

谢谢

Answer 1

更新答案：

正如@Daniel T. 所说，这可以在不使用主题的情况下解决：

let disposeBag = DisposeBag()

let otpFieldIsFocused = Observable.merge(
    otpField.rx.controlEvent(.editingDidBegin).map { true },
    otpField.rx.controlEvent(.editingDidEnd).map { false }
)

// Sends only when the field is first responder
let otpFieldIsNotEmpty = otpField.rx.text.orEmpty
    .map { $0.isEmpty }
    .withLatestFrom(otpFieldIsFocused) {
        (isEmpty: $0, isFocused: $1)
    }
    .filter { $0.isFocused }
    .map { !$0.isEmpty }

let otpConfirmFieldIsFocused = Observable<Bool>.merge(
    otpConfirmField.rx.controlEvent(.editingDidBegin).map { true },
    otpConfirmField.rx.controlEvent(.editingDidEnd).map { false }
)

let otpConfirmFieldIsNotEmpty = otpConfirmField.rx.text.orEmpty
    .map { $0.isEmpty }
    .withLatestFrom(otpConfirmFieldIsFocused) {
        (isEmpty: $0, isFocused: $1)
    }
    .filter { $0.isFocused }
    .map { !$0.isEmpty }

Observable.merge(otpFieldIsNotEmpty, otpConfirmFieldIsNotEmpty)
    .startWith(false)
    .bind(to: button.rx.isEnabled)
    .disposed(by: disposeBag)

旧答案：

这可以使用switchLatest 语句来完成：

import RxSwift
import RxCocoa

...

let disposeBag = DisposeBag()
let subject = PublishSubject<Observable<String>>()

otpField.rx
    .controlEvent(.editingDidBegin)
    .subscribe(onNext: {
        subject.onNext(otpField.rx.text.orEmpty.asObservable())
    })
    .disposed(by: disposeBag)

otpConfirmField.rx
    .controlEvent(.editingDidBegin)
    .subscribe(onNext: {
        subject.onNext(otpConfirmField.rx.text.orEmpty.asObservable())
    })
    .disposed(by: disposeBag)

subject
    .switchLatest()
    .map { !$0.isEmpty }
    .startWith(false)
    .distinctUntilChanged()
    .bind(to: button.rx.isEnabled)
    .disposed(by: disposeBag)

otpField.becomeFirstResponder()

如果您需要禁用按钮，例如，当两个字段都失去焦点时，您可以这样做：

subject.onNext(.just(""))