typescript - Kako omogućiti gumb koristeći reaktivne forme u Angular 2?

Imam ulazno polje i gumb. Kada polje nije prazno, gumb bi trebao biti omogućen. Ali u mom slučaju već prosljeđujem vrijednost ulaza, pa bi trebao biti omogućen, ali to se ne događa. Omogućuje se tek kada upišem nešto u ulazno polje. Ima li informacija o tome kako to postići. Ispod je moj kod.

export class SignupFormComponent implements OnInit {
  userForm: FormGroup;
  submitted: boolean;
  hello = "hello world";

  ngOnInit() {
    this.userForm = new FormGroup({
      firstName: new FormControl('',[<any>Validators.required, <any>Validators.minLength(5)])
    });
  }

  onSubmit({ value, valid }: { value: userForm, valid: boolean }) {
    this.submitted = true;
    console.log(value,valid);
  }
}

evo mog HTML koda

<form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm)" validate>
  <div class="form-group">
    <label>First Name</label>
    <input type="text" class="form-control" formControlName="firstName" [value]="hello">
  </div>
  <button type="submit"  class="btn btn-primary" [disabled]="userForm.invalid">Submit </button>
</form>

Odgovor #1

Uklonite [value]="hello" iz svog unosa jer bi to trebalo ići u new FormControl(value, [validators], [asyncValidators]) za reaktivne obrasce.

nešto poput:

ngOnInit() {
  this.userForm = new FormGroup({
    firstName: new FormControl(this.hello, [<any>Validators.required, <any>Validators.minLength(5)])
  });
}

Odgovor #2

Jednostavan način je koristiti reaktivne obrasce, ovako:

• korak1: uvezi ReactiveForm, FormBuilder, Validators
• korak 2: deklarirajte objekt FormGroup i injektirajte form builder u konstruktor
• korak3: inicijalizirajte vašu grupu obrazaca
• korak 4: korištenje reaktivnog obrasca na isti način kao i prije, ali s nekim promjenama

Kod :

export class SignupFormComponent implements OnInit {
  userForm: FormGroup;
  firstName: string;

  constructor(private _formBuilder:FormBuilder){}

  ngOnInit() {
    this.userForm = this._formBuilder.group({
      'firstName': ['',[Validators.required,Validators.minLength(5)]]
    });
  }

  onSubmit() {
    console.log(this.firstName);
  }
}

HTML :

 <form [formGroup]="userForm" (ngSubmit)="onSubmit()" name="userForm">
      <div class="form-group">
        <label>First Name</label>
        <input type="text" [(ngModel)]="firstName" class="form-control" formControlName="firstName">
        <p *ngIf="userForm.controls.firstName.invalid && (userForm.controls.firstName.dirty || userForm.controls.firstName.touched)"> Error message </p>
      </div>
      <button type="submit"  class="btn btn-primary" [disabled]="userForm.invalid">Submit </button>
    </form>