angular2 подтвердите форму при нажатии кнопки

Question

Если я отправлю форму с помощью button type="submit", появятся сообщения о проверке формы и все в порядке. Однако, если у меня есть кнопка (или ссылка) с (click)="myhandler()", то проверки не отображаются.

Как я могу либо:

• тег элемент как требующие валидатор для запуска или
• и программно запустить отображение сообщений проверки.

Примечание: это простые проверки, как это требуется в полях ввода.

Пример кода:

<form (ngSubmit)="save()">      
    <input required type='text' [(ngModel)]="name"> 
    <!-- Shows validation messages but still calls save() --> 
    <button (click)="save()">Click</button> 
    <!-- Only submits if valid and shows messages -->  
    <button type="submit">Submit</button>   
</form> 
<!-- does not even show validation messages, just calls save --> 
<button (click)="save()">Click 2</button> 

Answer 1

Кнопка с типом представить спусковые подчиненной формы автоматически, я думаю, вы должны вызвать отправки формы вручную:

<form (ngSubmit)="save()" #form="ngForm"> 

<button (click)="form.onSubmit()">Click 2</button> 

Why "ngForm"? A directive's exportAs property tells Angular how to link local variable to the directive. We set name to ngForm because the NgControlName directive's exportAs property happens to be "ngForm".

documentation

Answer 2

Поместите свой click2 кнопка в пределах form бирка. Он начнет работать!

Answer 3

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

<form (ngSubmit)="save()" #myForm="ngForm"> 

и отключить кнопку, когда форма не является действительным

<button (click)="save()" [disabled]="!myForm.form.valid">Click 2</button>

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

Answer 4

Programatically check and disable using validation

<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup"> 
    <div class="col-md-7"> 
    Name: <input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name'> 
    </div> 
    Form Valid : {{CreateGroup.valid}} 
</form> 
<br> 
<div class='text-center'> 
    <button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Create</button> 
</div> 

рабочий пример http://plnkr.co/edit/aoHHw709VeMlP8Qfgnp6?p=preview

Answer 5

условия положить в [скрыто] директивы и изменить представленное свойство истинна на представить!

<div [hidden]="email.valid || (email.untouched && !submitted) || !submitted" class="alert callout"> 
    <span [hidden]="!email.hasError('required')">Required</span> 
</div> 

onSubmit(){ 
    this.submitted = true 
} 

Answer 6

ниже код поможет вам .. Проверяли с угловой 4 Последней версией 4.2.4

<form method="post" #f="ngForm" name="form" novalidate="novalidate" class="form"> 
    <div class="row"> 
     <div class="form-group col-sm-12" [ngClass]="{'has-error':!listname.valid && (listname.dirty || listname.touched || f.submitted)}"> 
     <label for="listname">Name</label> 
     <input id="listname" name="listname" type="text" [(ngModel)]="listData.title" 
     required="true" placeholder="List Name" #listname="ngModel" class="form-control"/> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group text-right col-md-12 visible-md visible-lg"> 
     <button type="button" name="save" (click)="f._submitted = true;saveAndPublish=false;saveList(f.valid)" class="btn btn-default">Save 
     Save List 
     </button> 
     <button type="button" name="saveandpublish" (click)="f._submitted = true;saveAndPublish=true;saveList(f.valid);" class="btn btn-primary">Save 
     & Publish List 
     </button> 
     </div> 
    </div> 
</form> 

в вашем .ts Файл

saveList(isValid: boolean) { 
    if (isValid) { 
     console.log(this.listData) 
    } 

    } 

Answer 7

Пожалуйста, обратите внимание: этот подход к реактивному формы.

Я использовал свойство markAsTouched() для запуска проверки нажатием кнопки.

Пусть следующие кнопки вне формы:

<button type="button" (click)="validateForm()">Submit</button> 

Теперь в методе validateForm если форма является недействительной, вы можете установить markAsTouched() свойства для каждого из элементов формы и угловые будет показывать сообщения проверки.

validateForm() { 
    if (this.myformGroup.invalid) { 
     this.myformGroup.get('firstName').markAsTouched(); 
     this.myformGroup.get('surname').markAsTouched(); 
     return; 
    } 
    // do something else 
} 

при условии наличия проверки настройки сообщений в вашем HTML, как

<mat-error *ngIf="myformGroup.get('firstName').hasError('required')"> 
    first name is required 
</mat-error> 

и вы требовали настройки проверки поля в вашей форме групповой строитель как

firstName: ['', Validators.required]