Angular проверка формы работает на Ма c, но не на Iphone

Question

Я в процессе создания приложения для моей подруги, чтобы выучить португальский. Я создал раздел упражнений, который проверяет вводимые пользователем данные и возвращает информацию о правильности каждого ответа и количестве правильных ответов. На моем Ма c Chrome все работает нормально, но при тестировании приложения на моем iphone оно не работало, как ожидалось.

Два ответа показались неверными, когда они должны были показаться правильными. Поскольку в португальском есть забавные персонажи, я подозреваю, что это может быть проблемой. Возможно, браузеры iphone не отвечают на «в», что будет правильным ответом на вопросы 4 и 5. Однако это «é», что будет правильным ответом на вопросы 2 и 3.

Есть ли намеки на то, почему это не работает только на мобильных устройствах? Вот тестовое приложение: testform.learningtodom.com

Вот html

<form [formGroup]="exercise1" (ngSubmit)="onSubmit(exercise1.value)">
  <label>
    1. Eu <input 
      name="answer1"
      type="text" 
      id="answer1"
      formControlName="answer1" 
      > gordo (I'm fat)
  </label>
  <div *ngIf="isAnswered"><p>{{ this.answerOne }}</p></div>
<br>

  <label>
    2. Ela <input 
      name="answer2"
      type="text" 
      id="answer2"
      formControlName="answer2" 
      > advogada (She's a lawyer)
  </label> 
  <div *ngIf="isAnswered"><p>{{ this.answerTwo }}</p></div>
  <br>
  <label>
    3. Ele <input 
      name="answer3"
      type="text" 
      id="answer3"
      formControlName="answer3" 
      > chato (He's annoying)
  </label> 
  <div *ngIf="isAnswered"><p>{{ this.answerThree }}</p></div>
  <br>
  <label>
    4. Você <input 
      name="answer4"
      type="text" 
      id="answer4"
      formControlName="answer4" 
      > atrasado (You're late)
  </label> 
  <div *ngIf="isAnswered"><p>{{ this.answerFour }}</p></div>
  <br>
  <label>
    5. Ela <input 
      name="answer5"
      type="text" 
      id="answer5"
      formControlName="answer5" 
      > suada (She's sweaty)
  </label> 
  <br>
  <div *ngIf="isAnswered"><p>{{ this.answerFive }}</p></div>
  <br>
  <button *ngIf="!isAnswered" type="submit">Submit</button>
  <div *ngIf="isAnswered">You answered {{ this.result }} questions correctly</div>
  <button *ngIf="isAnswered" type="submit" (click)="resetForm()">Try Again</button>

</form>

Вот так

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Answer } from './answer.model';

@Component({
  selector: 'app-exercise',
  templateUrl: './exercise.component.html',
  styleUrls: ['./exercise.component.scss']
})
export class ExerciseComponent implements OnInit {
  exercise1: FormGroup;
  isAnswered = false; 
  answerOne: string
  answerTwo: string
  answerThree: string
  answerFour: string
  answerFive: string
  result=0; 

  constructor(
    ) { }

  ngOnInit() {
    this.exercise1 = new FormGroup({
      'answer1' : new FormControl(null),
      'answer2' : new FormControl(null),
      'answer3' : new FormControl(null),
      'answer4' : new FormControl(null),
      'answer5' : new FormControl(null),   });
  }

  onSubmit(answer: Answer): void {  
    this.isAnswered = true; 
    if (answer.answer1 == "sou") {
      this.answerOne="correct"
      this.result++
    } else {
      this.answerOne="incorrect"
    }

    if (answer.answer2 == "é") {
      this.answerTwo="correct"
      this.result++
    } else {
      this.answerTwo="incorrect"
    }

    if (answer.answer3 == "é") {
      this.answerThree="correct"
      this.result++
    } else {
      this.answerThree="incorrect"
    }

    if (answer.answer4 == "está") {
      this.answerFour="correct"
      this.result++
    } else {
      this.answerFour="incorrect"
    }

    if (answer.answer5 == "está") {
      this.answerFive="correct"
      this.result++
    } else {
      this.answerFive="incorrect"
    }
    console.log(this.result)
}

  resetForm() {
    this.exercise1.markAsPristine();
    this.exercise1.reset();
    this.isAnswered = false; 
  }
}