Swift5 RxSwift 文字入力のバリデーションからのボタンの有効化

Question

こんにちは。

現在RxSwiftの勉強をしており、テキスト入力のバリデーションをしてボタンを有効化するという流れを作っています。
ですが以下のコードを実装すると落ちてしまいます。

View

import UIKit
import RxCocoa
import RxSwift

class AddTabViewController: UIViewController {
    
    @IBOutlet weak var titleLable: UILabel!
    @IBOutlet weak var itemTextField: UITextField!
    @IBOutlet weak var detailTextField: UITextField!
    @IBOutlet weak var tagTextField: UITextField!
    @IBOutlet weak var memoTextView: UITextView!
    @IBOutlet weak var addButton: UIButton!
    
    private lazy var viewMdoel = AddTabViewModel(
        itemLabelObservable: itemTextField.rx.text.asObservable(),
        detailLabelObservable: detailTextField.rx.text.asObservable(),
        tagLabelObservable: tagTextField.rx.text.asObservable(),
        memoLabelObservable: memoTextView.rx.text.asObservable(),
        addButtonTapped: addButton.rx.tap.asObservable(),
        validation: Validation()
    )
    
    private let disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        bindingViewModel()
    }
    
    func bindingViewModel() {
        
        itemTextField.rx.text
            .bind(to: viewMdoel.itemLabel)
            .disposed(by: disposeBag)
        
        detailTextField.rx.text
            .bind(to: viewMdoel.detailLabel)
            .disposed(by: disposeBag)
        
        tagTextField.rx.text
            .bind(to: viewMdoel.tagLabel)
            .disposed(by: disposeBag)
        
        memoTextView.rx.text
            .bind(to: viewMdoel.memoLabel)
            .disposed(by: disposeBag)
        
        // ここで落ちているかと思われます
        viewMdoel.isEnableButton
            .bind(to: addButton.rx.isEnabled)
            .disposed(by: disposeBag)

        addButton.rx.tap
            .subscribe(onNext: { _ in
                self.viewMdoel.addItem()
            })
            .disposed(by: disposeBag)    
    }
}

ViewModel

import Foundation
import RxSwift
import RxCocoa

final class AddTabViewModel {
    
    let validatedItem: Observable<Bool>
    let validatedDetail: Observable<Bool>
    let validatedTag: Observable<Bool>
    let isEnableButton: Observable<Bool>
    let itemLabel = BehaviorRelay<String?>(value: "")
    let detailLabel = BehaviorRelay<String?>(value: "")
    let tagLabel = BehaviorRelay<String?>(value: "")
    let memoLabel = BehaviorRelay<String?>(value: "")
    
    init(
        itemLabelObservable: Observable<String?>,
        detailLabelObservable: Observable<String?>,
        tagLabelObservable: Observable<String?>,
        memoLabelObservable: Observable<String?>,
        addButtonTapped: Observable<Void>,
        validation: TextValidate
        ) {

        
        validatedItem = itemLabelObservable
            .flatMap { (input) -> Observable<Bool> in
                return validation
                    .validate(text: input)
            }
            .share()
        
        validatedDetail = detailLabelObservable
            .flatMap { (input) -> Observable<Bool> in
                return validation
                    .validate(text: input)
            }
            .share()
        
        validatedTag = tagLabelObservable
            .flatMap { (input) -> Observable<Bool> in
                return validation
                    .validate(text: input)
            }
            .share()
        
        isEnableButton = Observable.combineLatest(
            validatedItem,
            validatedDetail,
            validatedTag
        ) {
            $0 && $1 && $2
        }
        .share()
        
    }
    
    func addItem() {
        let item = Item(
            name: itemLabel.value!,
            detail: detailLabel.value!,
            tag: tagLabel.value!,
            memo: memoLabel.value!,
            fav: false,
            celllNo: items.count
        )
        items.append(item)
    }
    
}

実行したい流れは、
３つのインプットが確認できればボタンを有効かするというものなのですが、
combineLatestの部分が間違ってるのでしょうか？

.validateではBoolを返すようにしており、
inputのtextFieldの３つがtrueならば、isEnableがtrueになるという風に
イメージして書いてみたのですが、Rxにまだ不慣れのため手こずっています。
どこに不備があるのか指摘していただけないでしょうか？

一応いかにValidationのコードも記載いたします。

よろしくお願いいたします。

Validation Model

import Foundation
import RxSwift

enum TextError: Error {
    case blank
    case length
}

protocol TextValidate {
    func validate(text: String?) -> Observable<Bool>
}

final class Validation: TextValidate {
    
    func validate(text: String?) -> Observable<Bool> {
        switch text {
        case .none:
            return Observable.error(TextError.blank)
        case let text?:
            switch text.isEmpty {
            case true:
                return Observable.error(TextError.blank)
            case false:
                return Observable.just(true)
            }
        }
    }
}

extension TextError {
    var button: Bool {
        switch self {
        case .blank, .length:
            return false
        }
    }
}

追記

出現しているエラーメッセージです。

Thread 1: Fatal error: Binding error: blank

Comments

[fuzzball]

エラーメッセージは？

[mogiruri]

コメントありがとうございます。
エラーメッセージ追加いたしました。

Answer 1

クラッシュの原因は、Errorを流すストリームをそのままUIにバインドしてしまっていることです。UIはErrorを受け取ることはできませんから、Error時の代わりの値なり、分岐なりを設定してあげる必要があります。

とりあえず、Errorが流れてきたらボタンを無効にしたいということであれば、以下のように修正すればよいでしょう。

validatedItem = itemLabelObservable
    .flatMapLatest { (input) -> Observable<Bool> in
        return validation
            .validate(text: input)
            .catchErrorJustReturn(false) // 後続の処理にエラーを流さないために、ここでcatchします
    }
    .share()

// 以下同様...

※本件とは関係ないですが、itemLabelObservableに流れてきた最新の値についてのみバリデーションを行えばいいはずなので、flatMapではなくflatMapLatestの方を使うべきかと思います。

また、このようなミスを防ぐ手段として、DriverやRelayといったものがRxCocoaには用意されています。これらの使用も検討してみると良いかもしれません。

Comments

[mogiruri]

コメントありがとうございました。
.cathErrorを間に挟んだところ落ちることはなくなりました。エラーハンドリングは最後まで書き切っていなかったので納得いきました。

ですが、テキスト入力後にボタンがdisableのままで有効化されません。
見た所、バインディング自体はされているように見えますが、３つのtrueを確認できたらというフローが機能していないのでしょうか？
何かご指摘できるところがあれば是非お願いいたします。

[kakajika]

そうでした、すみません。
Rxのストリームの基本的な性質として、Errorを流した後は一切の値を流さない、というものがあります。そもそもErrorは本来、望ましくない状態に陥った場合に発生させるものですから、今回の場合はボタンを無効にするためにErrorを使うべきではなく、単純にtrue/falseを流してあげればいいはずです。
回答の方も修正しておきます。
→と思ったのですが、あまりコードの方針に口出しするのもどうかと思ったので、最低限の修正にとどめておきました。

[mogiruri]

ご回答ありがとうございます。
observable.just(false)にしてみたところ無事に期待通りの動きをしてくれました。
errorとcompletedでdisposedになるという意味がいまいち掴めてなかったのですが、このようにsubscribeができなくなるんですね。今回のような継続して動作を切り替えたい場合は不適切と、、、
最近しっかりエラーハンドリングしなきゃとどんな場面にも詰め込もうとする部分があったので、このようにやらなくてもいい部分が見えて良かったです。
提案していただいたflatMapLatest, Driver, Relayも調べて採用していきたいと思います。

Rxは勉強のステップが踏みづらくてとても大変です。
ありがとうございました。

[mogiruri]

※エラーハンドリングをしなくていい部分というより、ハンドリングでエラーをここで流すかどうかが問題ですね
※修正ありがとうございます。validation内でfalseを流すというより、確かにvalidation内ではerrorHandlingをきっちり行ってもいいが、ご指摘の場所でerrorを捕まえたらfalseを返すというフローの方が汎用性も良さそうです。

[kakajika]

おっしゃる通りで、意図を汲んでいただけてよかったです。
バリデーションの結果をErrorで返すのが適切かどうかは正直微妙なところだと思います。失敗の際に理由も含めて流したいという意図があるのだと思いますが、Result型のようなものを使うのがより望ましいと思います。(たしかSwift5から使えたような？)