Программная настройка формы и ввода «ng-dirty»

Question

Я никогда раньше не работал с Angular или Angular2, но теперь мне нужно сделать обновление для сайта, работающего в моем домене, который использует Angular2. Мне нужно программно заполнить текстовое поле и нажать «Отправить», но после установки значения текстового поля с использованием .value = «val» он по-прежнему обрабатывает текстовое поле, как если бы оно было пустым.

Я читал на угловом уровне и теперь понимаю концепцию ng-dirty и ng-pristine, но программное изменение класса на ng-dirty все равно не работает.

Кажется, что даже если я меняю классы, он по-прежнему не обновляет «нетронутый» статус и по-прежнему считает, что текстовое поле пуст.

Я читал про «markAsDirty()» и пытался использовать его, но я получаю «markAsDirty не функция». Мне просто нужно выяснить, как обновить страницу, чтобы она поняла, что текстовое поле не пустое и позволяет мне отправить форму.

Большое спасибо!

Edit: форма Страница:

<form id="form_register" novalidate=""> 
    <div class="form-steps"> 
     <div class="form-group"> 
      <div class="input-group"> 
       <input autocomplete="off" class="form-control ng-pristine ng-invalid ng-touched" data-is-regex="true" data-mask="[a-zA-Z0-1\.]+" id="username" name="username" ngcontrol="username" placeholder="Username" required="" style="color: black !important;" tabindex="13" type="text"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="input-group"> 
       <input autocomplete="off" class="form-control ng-untouched ng-pristine ng-invalid" id="password" name="password" ngcontrol="password" placeholder="Password" required="" style="color: black !important;" tabindex="14" type="password"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <button class="btn btn-block btn-lg btn-info" tabindex="4" type="submit"> 
            Log In 
      </button> 
     </div> 
    </div> 
</form> 

Моя проблема заключается в том, что это:

document.getElementById("username").value = "testuser"; 
document.getElementById("password").value = "testpass"; 
document.getElementsByClassName("btn btn-block btn-lg btn-info")[0].click(); 

заканчивает тем, что дает мне сообщение, говорящее имя пользователя и пароль необходимы, даже если есть значение, показывающее в текстовом поле. Просто нажмите на текстовое поле, набрав символ, а затем его удаление позволит мне отправить форму, но мне нужно выполнить это без взаимодействия с пользователем.

Answer 1

Вы заполняете формы собственным javascript и не обновляете угловую модель. В компоненте backing вам нужно использовать ngmodel для подключения ваших элементов к компоненту. Затем обновите переменные в компоненте, и все будет правильно отображаться.

Answer 2

Хорошо, есть несколько проблем с кодом, который я вижу, и я пойду, чтобы это работало, как ожидалось.

Для формы с шаблоном создайте и назначьте переменную группы форм (которая сделает наш блестящий NgForm, который мы позже присоединяем к элементам управления с ngControl) в шаблоне и позволяет привязать функцию отправки, пока мы на ней:

<form #myForm="ngForm" (ngSubmit)="submit(myForm.value)" id="form_register" novalidate=""> 

Каждый из наших входов является автономным и еще не привязан к форме, чтобы сделать это, мы хотим, чтобы очистить ng- классы, которые должны управляться Угловое 2 и добавить наш [(ngModel)] связывание с недвижимость.

<input autocomplete="off" class="form-control" data-is-regex="true" data-mask="[a-zA-Z0-1\.]+" 
         id="username" name="username" placeholder="Username" ngControl="username" [(ngModel)]="username" 
         required style="color: black !important;" tabindex="13" type="text"> 

Мы собираемся отключить наш представить, если форма является недействительным:

<button [disabled]="myForm.invalid" class="btn btn-block btn-lg btn-info" tabindex="4" type="submit">Log In</button> 

Наш класс имеет username и password свойства, которые мы связывающиеся, и наши представить функции:

export class App { 
    password: string; 
    username: string; 

    submit(value) { 
    console.log("submitting: " + JSON.stringify(value)); 
    } 
} 

Наконец, если мы действительно хотим пометить все грязные программно таким образом, нам придется захватить нашу переменную шаблона в нашем коде с помощью ViewChild:

@ViewChild('myForm') formGroup; 
password: string; 

ngAfterContentInit() { 
    this.formGroup.control.markAsDirty(); 
} 

Чтобы сделать это за контроль либо мы должны получить доступ к нему через нашу formGroup переменного или добавить отдельный переменный шаблон на входах можно захватить с [(ngModel)]="username" #username="ngModel", например.

вот plunker вы можете играть с, чтобы попытаться развить свое понимание: http://plnkr.co/edit/ukJ1kq2UFBvtoCsxbyba?p=preview