Form der Validierung von Eingaben, im Winkel 2(Vorlagen)

Ich möchte diese Eingänge, um eine Meldung anzuzeigen wie "Name " erforderlich", wenn gesendet wird(also der submit-button ist solange deaktiviert, bis Sie es ist der name innen). Gibt es vielleicht einen einfachen Weg, es zu tun mit Winkel-2 Vorlagen-Formulare? Ich denke, ich sollte einige Eigenschaften in form von HTML, und schließen Sie es an eine Komponente, aber konnte es nicht herausfinden, wobei die Proben in der Dokumentation. Schätze all die Hilfe.

<form class="">
    <div>
        <p>Name:</p>
        <input type="text">
    </div>
    <div class="link-input">
        <p>City:</p>
        <input type="text">
    </div>

    <button 
        (click)="submitForm()">
        Submit
    </button>
</form>

InformationsquelleAutor Smithy | 2016-12-14

angular

VORLAGEN FORMULARE

Ich auch mit dieser Frage fand ich Antwort und dass ich mit Ihnen teilen möchte.
Erstellt habe ich ein login-Formular mit Validierung, die Aussehen wie folgt:

login.component.html

<div class="col-md-6 col-md-offset-3">
    <h2>Login</h2>
    <form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
        <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
            <label for="username">Username</label>
            <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
            <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
        </div>
        <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
            <label for="password">Password</label>
            <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
            <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
        </div>
        <div class="form-group">
            <button [disabled]="loading" class="btn btn-primary">Login</button>
            <img *ngIf="loading" src="loading.gif" />
            <a [routerLink]="['/register']" class="btn btn-link">Register</a>
        </div>
    </form>
</div>

login.Komponente.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { AlertService, AuthenticationService } from '../services';

@Component({
    templateUrl: './login.component.html'
})

export class LoginComponent implements OnInit {
    model: any = {};
    loading = false;
    returnUrl: string;

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService,
        private alertService: AlertService) { }

    ngOnInit() {}

    login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(
                data => {
                    this.router.navigate([this.returnUrl]);
                },
                error => {
                    this.alertService.error(error);
                    this.loading = false;
                });
    }
}

Ich hoffe, dies wird Ihnen helfen, wenn Sie Hilfe brauchen schreiben Sie mir. Ich fühle mich glücklich, Ihnen zu helfen. @Smithy ich bin auch Lern-Winkel 2.

In Ihrer Antwort, bei der Überprüfung nicht auftreten, bis das Formular gesendet wird. Haben nicht Sie konfrontiert jede Ausgabe beim klicken auf den registrieren-link.
Nein, der link leitet nur zu einem Anmeldeformular.
Ich habe die gleiche form haben, ich denke, man kopiert es von einem Winkel-Authentifizierung tutorial, aber ich wollte Fragen, ob es hat etwas zu tun mit dem backend login.Komponente.ts-code habe ich entfernt, den code geändert und es auf FB Authentifizierung und jetzt funktioniert es nicht.

InformationsquelleAutor Devansh

3

Ihre Html :
```
<form role="form" [formGroup]="inputForm" novalidate>
    <div>
        <p>Name:</p>
        <input
         formControlName="name"
         type="text">
    </div>
    <div class="link-input">
        <p>City:</p>
        <input
         formControlName="city"
         type="text">
    </div>

    <button 
        [disabled]="!inputForm.valid"
        (click)="submitForm()">
    </button>
</form>
```
Ihre Komponente:
```
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

export class InputComponent  {   
   public inputForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {

  this.inputForm = this.formBuilder.group({
  name:    new FormControl('', Validators.required),
  city:    new FormControl('', Validators.required),
   });
  }
//... codes..
}
```
- Nochmals vielen Dank, ich bin versuchen, gibt es vielleicht einen Weg, es zu tun durch den Import nur FormsModule? Ich nur don ' nicht haben genug Erfahrung, um es zu implementieren mit all diesen Angular2 Sachen, so dass es schwierig für mich zu verstehen :/ ich würde post ein ganzes code hier, aber es ist ziemlich lang. Sollte ich die ganz neue Komponente mit dem code(der code, den du gepostet hast unter Deiner Komponente)? Ich habe eine app.Komponente, kann ich es von dort aus irgendwie?
- ja , natürlich , die InputComponent, dass ich das gepostet wird, ist nicht notwendig , einfach den code in die Komponente, die relevant ist, um die HTML-Datei der beiden Eingänge (Stadt & der name) .. und nicht vergessen zu importieren, was über .. klar ?
- versuchen Sie es erneut, danke!
InformationsquelleAutor selem mn

Dadurch wird sichergestellt, dass das Formular wurde bearbeitet (Eingänge wurden geändert), und dass das name-Feld ist mindestens 1 Buchstaben lang. Sie können tun, etwas ähnliches für die Stadt.

Komponente:

import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

export class InputComponent  {   
  public inputForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {

    this.inputForm = this.formBuilder.group({
      name:    new FormControl('', Validators.required, Validators.minLength(1)]),
      city:    new FormControl('', Validators.required),
    });
  }
}

Anzeigen:

<form [formGroup]="inputForm" novalidate>
  <p>Name:</p>
  <input placeholder="Exercise" formControlName="name">
  <div class="errorMsg" *ngIf="inputForm.get('name').touched && inputForm.get('name').status === 'INVALID'">
    Name is required</div>
  <p>City:</p>
  <input placeholder="Exercise" formControlName="city">
  <button [disabled]="!inputForm.valid || !inputForm.touched (click)="submitForm()">Submit</button>
</form>

InformationsquelleAutor Nate May

Den Winkel-2 Formular-Validierung ist ganz unterschiedlich, als das, was wir getan haben in den Winkel-1.
wenn Sie schreiben form-tag auf die DOM-Winkel-2 fügt die ngForm und ngControl zu.
Eine Taste kann deaktiviert werden, indem die angular2 Eigenschaft [deaktiviert]. halten-Taste deaktiviert, müssen Sie einen Antrag validation-Eigenschaft auf [disabled]. Ich habe ein einfaches Beispiel, das Ihnen Formular-Validierung, Eingabe-Felder-Validierung mit Muster-Validierung.
die Schaltfläche wird deaktiviert, bis das Formular wird gültig

In Ihre HTML -

<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)">
  <div class="form-group" [ngClass]="{'has-error':!signinForm.controls['usermail'].valid && signinForm.controls['usermail'].touched}">
      <label>Email Address</label>
      <input class="form-control" type="email" [formControl]="signinForm.controls['usermail']">
      <span *ngIf="signinForm.controls['usermail'].hasError('required') && signinForm.controls['usermail'].touched && !signinForm.submitted" class="required pull-right">*Please Enter Email</span>
      <span *ngIf="signinForm.controls['usermail'].hasError('pattern') && signinForm.controls['usermail'].touched" class="required pull-right">*Invalid Email</span>
    </div>
    <div class="form-group" [ngClass]="{'has-error':!signinForm.controls['userpass'].valid && signinForm.controls['userpass'].touched}">
       <label>Password</label>
       <input class="form-control" type="password" [formControl]="signinForm.controls['userpass']" (focus)="showErrorMessage=false">
        <span *ngIf="signinForm.controls['userpass'].hasError('required') && signinForm.controls['userpass'].touched && !signinForm.submitted" class="required pull-right">*Please Enter Password</span>
    </div>
      <button type="submit" class="btn btn-pri mds_btn" [disabled]="!signinForm.valid">Login</button>       
</form>

In der Komponente

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: [ './login.component.scss' ]
})
export class LoginComponent {
   myForm: FormGroup;

   emailRegex: any = '^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$';
    passRegex:any ='^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$'; 

   constructor(fb: FormBuilder) {

      this.myForm = fb.group({
         'logmail': [ null, Validators.compose([ Validators.required, Validators.pattern(this.emailRegex) ]) ],
         'logpass': [ null, Validators.compose([ Validators.required, Validators.pattern(this.passRegex) ]) ]
      });

    this.myForm.valueChanges.subscribe((form: any) => {
   });
  }

  submitForm(lgvalue: any) {
       //do logic here after submitting the form

  }
}

in diesem Beispiel, ich bin mit FormGroup Richtlinie des FormBuilder.Der FormBuilder erstellt Instanzen von FormGroup, die wir als eine form. Ich bin auch abonnieren form, so dass, wenn der Wert in das Eingabefeld eingegeben wird das Formular abonniert werden.

Ich hoffe das hilft dir 🙂

InformationsquelleAutor Malhari

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.