# Turbo Native 7. Strada Form Component (Native submit button) #196

- URL: https://superails.com/posts/turbo-native-7-strada-form-native-submit-button
- Published: 2024-09-22
- Duration: 08:35
- Access: free
- Topics: bridge (Strada), outdated
- Playlists: Hotwire Native

Strada Form pattern lets us hide the submit button we display in web views, and replace it with a Native submit button in the top-right corner of the screen.

I think this should be the default pattern used for most Turbo Native forms.

[Episode source code](https://github.com/corsego/tinder/commit/83bf8f2c4def9539627150e461bc47d01bbb452c)

[iOS source](https://github.com/hotwired/turbo-ios/blob/main/Demo/Strada/FormComponent.swift)

[html/rails source](https://github.com/hotwired/turbo-native-demo/blob/main/public/javascript/controllers/bridge/form_controller.js)

## Transcript

Hello friends. In the previous episode, we installed Strada and added a button component that would let us, uh, display native buttons in the, this, uh, nav bar. So I can add a button on the left or on the right of the, uh, native nav bar. I click at the button and uh, it, uh, works just as a link. And now we're going to add another start component that is a form component. So the form component is going to let us have a submit button on the top right corner of the npa, as you would have in many, uh, native iOS applications. And we're going to hide this, uh, update button from the form. So whenever we have a form open, we can say that we're going to use the Strada form component. And we are going to have the submit button here on the top right corner. Now we can take this, uh, form component from Turbo iOS. We go just to the demo application here we have Strada here, we have a few components and they're going to use this form component. So I'm going to copy the file name, go to our iOS application, and here inside components I'm going to create a new empty file that I will name form component Swift. I'm going to copy it. The accordance of this file, I really don't want to dig into this. Uh, you can have a look at it later at your own pace, but uh, I'm just going to reduce this component that is given to us. So, uh, we have this form component and now importantly I need to go to this bridge Component Plus app. And here I'm going to add the form component itself. So, uh, previously when the, uh, opened our request user agent here have bridge components, just button, and now it should be bridge components button and Form. So our I application is communicating to the web view that we are going to use one more Strada component. Let me refresh, uh, the iOS application, I'm going to restart it now. Okay, so here we have bridge components, button and form. And now we need to add a correspondent stimulus control in our Rails application. So, uh, as we have this turbine iOS, uh, demo application that runs with, uh, this turbine native demo repository, and from this repository, I'm going to find the form controller that is as stimulus controller that would go hand by hand with this form component. So I'm going to create this, uh, form controller inside our Rails application. Here. I'm going to controllers bridge. Inside I will have form controller js. I'm just going to copy the contents. So, uh, this form controller is going to communicate with, uh, this form component in the iOS application. And, uh, now we need to apply this form controller to a form in our application. So, uh, let's say, uh, when we visit the edit user registration path, we are going to display the update button in the top right corner right here. And, uh, to do this, we need to, well apply this from controller to our form. The form is in device registrations edit. So, uh, here I'm going to say data, uh, data bridge form, uh, no data controller equals bridge form. Okay, this one, uh, we have this dash dash because, uh, the foam controller is Nest inside the bridge folder. And we also need the, the submit target. So here we have the submit button. So I will say data, uh, bridge form, submit, uh, bridge form target will be named Submit. I think the Synex might work. Let's see if, uh, it works. I will restart the iOS application. Okay, now I'm visiting the added user path. And you see I have an update button here. I click it and it does in the form. Looks good. Now we can hide this other update button because it became redundant. So I'm going to do this with, uh, uh, what we did previously with, uh, the terminated variant. So on terminated, we are hiding this button. I will say, uh, gloss termin native hidden. Okay, let me refresh the page or resubmit it once again. And you see the update button was hidden in the Terminator view. And if I look at the application in the web view, I still have it, uh, just as it was before. So looks good. Now going back, let's have a look at how this form controller is used in the demo application. So we can go to views. And in the views we have Turbo, uh, they have strata form. So, uh, we have the form on the form, we say data controller bridge form, just as we do in our Rails application. And it also says Data action turbo submit, start bridge form, submit start and submit end. So it is also utilizing this submit start and start end. Let's also add this line. I will say, uh, data action. And this must do it. Let's see if, uh, the H TM L looks valid, uh, on the web. So data, action door submit, start bridge form, submit and submit end. Submit end. Okay, let's, uh, see if we see any differences in the mobile view. Now let's try clicking update. Okay, uh, let's restart the application. Now I will go back and resubmit. And you see the button is being disabled for a bit more time while the form submission is happening. So here we utilized the submit start and submit, and that will disable the submit button. And that's, uh, basically it. So now we already are using two separate native, uh, uh, Strada components, one for buttons in the npa and one for, uh, one for the form. Now, what if I move this button to be on the right? Let's have a look. I'll put the button on the right. I will restart the application. Okay, so now I'm browsing the application different pages. I see the profile page here. And when I'm on the actual profile page, I don't see the link to the current page. So that's kind of good. I have the update button and it submits the form. So looks good. And that's it for this episode. We learned how to use the Strada form component, see in the next one.