Блог

Кто-нибудь может помочь? Я хотел бы получить измененный код, чтобы…

1. кнопка будет активна только тогда, когда переменная username не пуста.
2. Нажатие кнопки приведет к сбросу значения имени пользователя на пустое.

Вот мой код:

username.html

     <section class="username">

    <input
    type="text"
    class="form-control"
    (input)="onUpdateUsername($event)">


    <button class="btn btn-primary"
    [disabled] = "!allowNewUsername"
    (click)="onCreateUsername();">Add Username</button>

    <p class="test"> {{ usernameCreationStatus }} </p>
    </section>
 

username.component.ts

     export class UsernameCheckComponent implements OnInit {
    allowNewUsername:boolean = false;
    usernameCreationStatus = 'Nothing was created!';
    userName = 'TestUsername';

    constructor() {
    setTimeout(() => {
    this.allowNewUsername = true;
     }, 2000);
    }

    ngOnInit(): void {
    }

    onCreateUsername () {
    this.CreationStatus = 'Username was created! Username name is '   this.serverName;
    }

    onUpdateUserName(event:Event) {
    this.userName = (<HTMLInputElement>event.target).value;
     }
    }
 

Если вы не хотите использовать allowNewUsername для отключения / включения добавления, вы можете просто отключить кнопку, если имя пользователя пустое или allowNewUsername равно false .

 <button class="btn btn-primary"
    [disabled] ="!userName || !allowNewUsername"
    (click)="onCreateUsername();">Add Username</button>
 

В вашем классе компонентов просто сбросьте переменную userName

 onCreateUsername () {
    this.CreationStatus = 'Username was created! Username name is '   this.serverName;
this.userName = ''; // reset the username
    }
 

Вы можете определить средство получения для действия кнопки:

 export class UsernameCheckComponent {
    public usernameCreationStatus: string = 'Nothing was created!';
    public userName: string | null = null;
    public get allowNewUsername() { return this.userName?.length }

    constructor() { }

    public onCreateUsername () {
        this.usernameCreationStatus = `Username was created! Username name is ${this.serverName}`;
    }
}
 

И в вашем шаблоне:

 <section class="username">
    <input type="text"
        class="form-control"
        [(ngModel)]="userName">

    <button class="btn btn-primary"
        [disabled] = "!allowNewUsername"
        (click)="onCreateUsername()">Add Username</button>

    <p class="test"> {{ usernameCreationStatus }} </p>
</section>
 

Попробуйте добавить ngModel для ввода двухстороннюю привязку, чтобы вы могли получить доступ к значению переменной для обоих. (шаблон и представление).

component.html

 <section class="username">
  <input type="text" class="form-control" [(ngModel)]="userName" (input)="onUpdateUsername($event)">
  <button class="btn btn-primary" [disabled] = "userName != ''" (click)="onCreateUsername();">Add Username</button>
  <p class="test"> {{ usernameCreationStatus }} </p>
</section>
 

component.ts

 onUpdateUserName(event: Event) {
   this.CreationStatus = 'Username was created! Username name is '   this.serverName;
   this.userName = "";
}
 

В app.module.ts

 import { ReactiveFormsModule } from "@angular/forms";
 

В username.component.ts

 import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';


@Component({
  selector: 'app-username',
  templateUrl: './username.component.html',
  styleUrls: ['./username.component.css']
})
export class UsernameComponent implements OnInit {

  constructor(private fb: FormBuilder) { }

  form!: FormGroup;
  usernameEntered!: string;

  ngOnInit(): void {
    this.form = this.fb.group({
      username: this.fb.control('')
    })
  }

  onSubmit(data: any){
    console.log(data); //any function
    this.form.reset(); 
    this.usernameEntered = ''; 
  }

  userInput(data: string){
    this.usernameEntered = data; 
  }


}
 

В username.component.html

 <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
    <input #userInputId 
            formControlName="username" 
            type="text" 
            placeholder="username" 
            (input)="userInput(userInputId.value)"> 
    <button type="submit" [disabled]="!usernameEntered">Submit</button>
</form>