Why does this navigation link not work as expected? - swift

Question

I tried to implement a login screen in swift 5 but the login navigation link doesn't seem to check the isActive variable from my view model. When I click it the first time it leads me to the next view although the login data is not correct. When I go back then and try to login again it checks the data.
LoginView:
import SwiftUI
struct LoginView: View {
#ObservedObject var viewModel: LoginViewModel
var username_text_field: some View {
TextField("Username", text: $viewModel.username)
}
var password_secure_field: some View {
SecureField("Password", text: $viewModel.password)
}
var login_button: some View {
NavigationLink(
destination: MenuView(),
isActive: $viewModel.is_valid
) {
Text("LOGIN").onTapGesture {
viewModel.login()
}
}
}
var body: some View {
NavigationView {
VStack {
Group {
username_text_field
password_secure_field
login_button
}
}
}
}
}
Login ViewModel:
import SwiftUI
final class LoginViewModel: ObservableObject {
#Published var username = ""
#Published var password = ""
#Published var is_valid = false
func login() {
self.is_valid = false
}
}
Is there something wrong with this approach or am I missing something else?

Answer 1

What Xcode version are you using? I'm on Version 12.5 (12E262) with iOS 14.5 and your code works fine. However, you might want to move the LOGIN button outside of the NavigationLink, so that it's guaranteed to only trigger based on isActive.
var login_button: some View {
Button {
viewModel.login()
} label: {
Text("LOGIN")
}
}
NavigationView {
VStack {
Group {
username_text_field
password_secure_field
login_button
NavigationLink(
destination: Text("Menu View"),
isActive: $viewModel.is_valid
) { EmptyView() } /// pass in `EmptyView`
}
}
}
Old answer:
Change login() to this:
func login() {
self.is_valid = true /// true, not false!
}
Also you should use camel case in Swift, so self.isValid instead of self.is_valid.