Form Post in AngularJS using WKWebView Objective C

Issue

Basically I don't know much about AngularJS. My task is to load a webpage inside of WKWebView. In that page, I have to pre-fill user name and password and hit the Sign in button programmatically using JavaScript. I have populated User name and Password field using JavaScript. But the issue is When I am clicking the Sign In Button by executing javascript, its not sharing anything to the server. So this is my form:

<div class="container ng-scope" ng-controller="LogonController">
<div class="panel panel-default center">
  <div class="panel-heading titletext" id="logo">
     <img src="images\black.png">
  </div>
  <div class="panel-body">
     <!-- ngRepeat: alert in alerts -->
     <form class="form-horizontal center ng-pristine ng-valid" ng-submit="submitCredentials()">
        <div class="control-group">
           <label class="control-label" for="userId">User ID:</label>
           <div class="controls">
              <input type="text" id="useremail" ng-model="userId" autofocus="autofocus" class="ng-pristine ng-untouched ng-valid">
           </div>
        </div>
        <div class="control-group">
           <label class="control-label" for="inputPassword">Password:</label>
           <div class="controls">
              <input type="password" id="userpassword" ng-model="password" class="ng-pristine ng-untouched ng-valid">
           </div>
        </div>
        <div style="margin-top:5px"></div>
        <div class="control-group">
           <div class="controls">
              <button type="submit" class="btn btn-default center"><img src="images/login2.png"> Sign in</button>
           </div>
        </div>
     </form>
  </div>

In iOS side I have wrote this code to execute my Javascript:

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
NSLog(@"didFinishNavigation");


dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 1 * NSEC_PER_SEC),dispatch_get_main_queue(), ^{
    //NSLog(@"Function Called");
    
    NSString *email = @"test";
    NSString *password = @"test";
    
    NSString *fillUser = [NSString stringWithFormat:@"document.getElementById('useremail').value='%@';", [email stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]]];
    NSString *fillPassword = [NSString stringWithFormat:@"document.getElementById('userpassword').value='%@';", [password stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]]];
    
    NSString *resultStringUser = [self stringByEvaluatingJavaScriptFromString:fillUser];
    NSString *resultStringPassword = [self stringByEvaluatingJavaScriptFromString:fillPassword];
    
    //NSLog(@"Result String For User is: %@ and Password: %@", resultStringUser, resultStringPassword);
    
});

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 15 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
    
    NSString *submitFunction = [NSString stringWithFormat:@"document.getElementsByClassName('btn btn-default center')[0].click();"];
    NSString *resultStringSubmit = [self stringByEvaluatingJavaScriptFromString:submitFunction];
    //NSLog(@"Result String for Submit is: %@", resultStringSubmit);
});
}

This is my stringByEvaluatingJavaScriptFromString method:

- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script {
__block NSString *resultString = nil;
__block BOOL finished = NO;

[self.webView evaluateJavaScript:script completionHandler:^(id result, NSError *error) {
    if (error == nil) {
        if (result != nil) {
            resultString = [NSString stringWithFormat:@"%@", result];
        }
    } else {
        NSLog(@"evaluateJavaScript error : %@", error.localizedDescription);
    }
    finished = YES;
}];

while (!finished)
{
    [[NSRunLoop currentRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate distantFuture]];
}

return resultString;
}

Username and password is posting blank because of these validation in the form "ng-pristine ng-untouched ng-valid". As soon as I type the user name and password with the keyboard of iPhone, it let me sign in by the javascript call for button click. Is there any way to invoke or validate "ng-pristine ng-untouched ng-valid" in the form before the form submit using javascript of JS execution?

NB: I don't have the right to change JS in the server. Whatever I have to do, have to be from iOS.

Thanks

Solution

Ok. So I have found the solution. This is not Javascript. So it will not work like Javascript. Instead of document.getElementById we have to use this for AngularJS:

NSString *submitUserRequest = [NSString stringWithFormat:@"angular.element(document.getElementById('useremail')).scope().userId='%@';", [email stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]]];
NSString *submitPasswordRequest = [NSString stringWithFormat:@"angular.element(document.getElementById('userpassword')).scope().password='%@';", [password stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]]];

Because before, it was not filling up the text input fields as AngulaJS has already binds it with dom directives.

Answered By - mAyA