Угловая форма 2 по умолчанию

Выдача с подтверждением формы.Угловая форма 2 по умолчанию

Я хочу отправить форму только в том случае, если форма действительна.

но с пустым вводом и нажатием кнопки отправки подает форму, хотя входы пусты.

<form name="equipmentForm" #f="ngForm" (ngSubmit)="f.form.valid && addEquipment()" validate>

Входы должны быть такими.

<input name="equimentId" class="text-input form-control" type="text" [(ngModel)]="model.equipmentNumber" pattern="^[0-9][0-9]{1,19}$" title="Equipment ID. can be upto 20 digits only.">

Я не могу опубликовать весь код, хотя.

это

f.form.valid правда от инициализации формы

хотел для того чтобы достигнуть что-то вроде этого

<div *ngIf="!model.equipmentModel && f.submitted" class="text-danger"> 
         Please enter Equipment Model 
</div>

Так на отправить я хочу показать это вместо браузера по умолчанию. , но это f.form.valid - чертовски верно по умолчанию.

источник

2017-02-22 manish kumar

вы должны добавить 'required' в виде входов, если вы хотите, чтобы они были недействительны, когда пустые – bergben

Thats не здесь, у меня есть аналогичная форма, но без обязательного атрибута и в том, что «f.form.valid» is true true –

. Это потому, что, возможно, у вас есть другие правила, применяемые как шаблон, но обычно ввод действителен, если он пуст и не имеет ' required', так что это определенно причина, по которой ваша форма отправляется. – bergben

Если вы указываете атрибут required на входе, форма не будет отправляться, если значение не заполнено. Но это относится только к значениям, которые не были предоставлены, и вы также можете проверить недопустимые значения.

Обычный способ отключить кнопку отправки, если форма не действительна. Например:

<button type="submit" [disabled]="!f.form.valid">Submit</button>

Angular documentation about form validation также показывает это. Посмотрите в нижней части «Простые шаблонные формы» раздел

источник

2017-02-22 13:14:33

Я не хочу отключать кнопку отправки. Хотя в вашем случае также верно f.form.valid. Так что это не удастся кнопке –

Ну, в этом случае вам нужно будет проверить валидацию за кнопкой отправки. В большинстве случаев людям не нравится отключать кнопку отправки, потому что она не дает визуальной обратной связи. Тот же Угловой документ, который я связал, также показывает путь вокруг этого. –

, но f.form.valid is true :( –

Вы должны добавить атрибут required к вашим тегам input, а затем, как указано в @Cobus Kruger, форма не будет отправлена до тех пор, пока она не будет заполнена.

Однако вы также можете дать попробовать на pristine, dirty варианты, которые позволяют проверить, если пользователь сделал какие-либо изменения в форме, так и в этом случае ваше состояние может выглядеть следующим образом:

<form name="equipmentForm" #f="ngForm" (ngSubmit)="f.form.valid && f.form.dirty ? addEquipment() : ''" validate>

и вход:

<input name="equimentId" class="text-input form-control" type="text" [(ngModel)]="model.equipmentNumber" pattern="^[0-9][0-9]{1,19}$" title="Equipment ID. can be upto 20 digits only." required />

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

источник

2017-02-22 13:19:16 Marcin

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

<form name="equipmentForm" #f="ngForm" (ngSubmit)="addEquipment(f)" validate>

В машинописи:

addEquipment(form){ 
    if(form.invalid){ 
     return; 
    } 

    //If it is valid it will continue to here... 
}

источник

2017-02-22 13:33:19

Угловая форма 2 по умолчанию

ответ

Смежные вопросы