Rxswift ios - Validate OTP field and Confirm OTP field on button click - ios

Question

I am new in RxSwift and want to implement a feature in my project.
I have to validate 2 fields, OTP and Confirm OTP using input/output MVVM using RxSwift on submit click.
Case1: If any textfield is empty submit button should be disabled, so if user starts typing the first textfield the submit button will be enabled (Same for confirm OTP textfield also)
Case2: On submit click i need to validate if either textfield is empty or not and show error on screen, Also if both the textfields value doesnt matches, it will show the error on submit button click.
let otpChangedText = BehaviorSubject<String>(value:"")
let confirmOtpChangedText = BehaviorSubject<String>(value:"")
let submitButtonTapped = PublishSubject<Void>()
let otp1Validation = otpChangedText.skipWhile { $0.isEmpty}.map {Validator.isEmpty(string: $0)}
let isValidOtp = otp1Validation.asDriver(onErrorJustReturn:false)
outputs = Outputs (isValidOTP: isValidOtp)
I have achieved the submit button disable state somehow but not getting any idea how should i show the error on screen if any of the field is empty and if the value of both the textfields dont match.
Please guide me. Thanks

Answer 1

As an aside, from the book "Intro To Rx":
Subjects provide a convenient way to poke around Rx, however they are not recommended for day to day use.
You shouldn't be throwing all those Subjects into the mix...
First let's create your business rules:
// Case 1
func eitherFilled(first: String?, second: String?) -> Bool {
first != nil && !first!.isEmpty || second != nil && !second!.isEmpty
}
// Case 2
func hasError(first: String?, second: String?) -> Bool {
first == nil || second == nil || first != second
}
You can test these independently from Rx or anything else to assure yourself that they are correct.
Now create your view models:
// Case 1
func buttonEnabled(first: Observable<String?>, second: Observable<String?>) -> Observable<Bool> {
Observable.combineLatest(first, second, resultSelector: eitherFilled)
}
// Case 2
func displayError(first: Observable<String?>, second: Observable<String?>) -> Observable<Void> {
Observable.combineLatest(first, second, resultSelector: hasError)
.filter { $0 }
.map { _ in }
}
Again, these are very easy to test using RxTest.
Now you can install your view models into your view controller and you know they work because you have tested them. (Note: I have not tested them. I leave it to you to make sure the logic is correct.)
final class MyViewController: UIViewController {
#IBOutlet weak var otpField: UITextField!
#IBOutlet weak var confirmOtpField: UITextField!
#IBOutlet weak var button: UIButton!
let disposeBag = DisposeBag()
override func viewDidLoad() {
super.viewDidLoad()
// Case 1
buttonEnabled(
first: otpField.rx.text.asObservable(),
second: confirmOtpField.rx.text.asObservable()
)
.bind(to: button.rx.isEnabled)
.disposed(by: disposeBag)
// Case 2
displayError(
first: otpField.rx.text.asObservable(),
second: confirmOtpField.rx.text.asObservable()
)
.bind {
finalPresentScene(animated: true) {
UIAlertController(title: "Error", message: "OTP fileds do not match.", preferredStyle: .alert).scene { $0.connectOK() }
}
}
.disposed(by: disposeBag)
}
}
So with all the above, you have two models representing your business rules, two view models converting those business rules into view updates, and your view controller serves to connect the view models to the views.
(If you want to learn more about the code I'm using to present the alert, see this GitHub repository: https://github.com/danielt1263/CLE-Architecture-Tools)