Açısal 2 Tetikleyici Form Onayı Onayla

Question

Açısal 2 ile bir form oluşturdum ve bazı custome validators ekledim. Şimdi, kullanıcı gönder düğmesini tıkladığında form doğrulamasını tetiklemek istiyorum. Şimdiye kadar bulduğum örneklerde, form geçersiz olduğu sürece, gönder düğmesi devre dışı bırakılır, ancak gönderme düğmesinin her zaman etkinleştirilmesini istiyorum ve kullanıcı tıkladığında, formu doğrulamanız gerekir. Bu çalışmayı nasıl yapabileceğimi ve hangi yazı tipini kullanmam gerektiğini bilen var mı? UpdateValueAndValidity yöntemini buldum ancak bu yöntemle çalışmıyor gibi görünüyor.

Answer 1

Şablon Dayalı Form kullanıyorsanız, bu sözdizimini kullanabilirsiniz: Böyle göndermek üzerinde de bazı hatalar ekleyebilir

add(isValid: boolean){ 
    if(isValid){ 
     //do something 
    } 
} 

<form #f="ngForm" (submit)="add(f.valid)" novalidate> 
    <button type="submit">Save</button> 
</form> 

ts:

<form #f="ngForm" (submit)="add(f.valid)" novalidate> 
    <label>Name</label> 
    <div> 
     <input [(ngModel)]="name" name="name" #name="ngModel" required> 
    </div> 
    <div[hidden]="name.valid || (name.pristine && !f.submitted)"> 
     <small class="text-danger">Please input name</small> 
    </div> 
    <button type="submit">Save</button> 
</form> 

Answer 2

Doğrulama, modeli her değiştirdiğinizde uygulanmalıdır. Ancak, belki de FormControl el değmemiş olduğundan hata iletisini göremiyor musunuz? İşte iyi çalışan çözümüm.

aşağıdaki kolay adımları ile yaptım: formGroupDirective

 

    @Component({ 
     selector: 'form', 
     templateUrl: 'form.component.html', 
     styleUrls: ['form.component.scss'] 
    }) 
    export class FormComponent implements OnInit { 
     @Output() submit = new EventEmitter(); 

     constructor(@Optional() private formGroupDirective: FormGroupDirective) { 
     } 

     ngOnInit() { 
      if (this.formGroupDirective) { 
       this.formGroupDirective.ngSubmit.subscribe(() => { 
        this.formGroupDirective.form['submitted'] = true; 
       }); 
      } 
     } 

    } 

(true olarak gönderilen göndermeniz durumunda ve setteki abone) enjekte

1. bir FormComponent (seçici "Formu") uygulayın

   önemli çizgiler ngOnInit içindedir

   formu için

2. Kontrolü

   * ngIf = "control? .hasError ('gerekli') hatayı göstermek için gönderildi & & (control? .touched || ? Oluşturulmasına destek olur

   Umut ") .submitted

Answer 3

(Reaktif Formu) onunla

Had sorun benim çözümdür:

- Şablon

<button type="button" (click)="f.ngSubmit.emit(f)">Submit From Outside 
form</button> 

<form novalidate #f="ngForm" (ngSubmit)="save($event)" 
[formGroup]="MyformGroup"> 
... 
</form> 

- Sınıf

@ViewChild('f') f: FormGroupDirective; 

submit(formDirective: FormGroupDirective) { 
    console.log('valid', formDirective.valid); 
    console.log('value', formDirective.value); 
} 

Formda olmayan bir düğmeyle form göndermek için kullandığım bir çözümdür.

Teşekkürler