Проблема с кнопкой отправки в angular

Question

Это фрагмент кода моей формы !! У меня проблемы с отключением кнопки отправки, если форма пуста или кнопка с частичным заполнением должна быть отключена, мне нужно заполнить все поля !! может кто-нибудь подсказать мне, что пошло не так?

    <form class="individual-form" method="post" [formGroup]="valueform" (ngSubmit)="onSubmit()">
      <div class="input_tab" *ngIf="!showcontent">
        <div class="form-group">
          <div class="input_text"><span>Name</span></div>
          <input type="Name" formControlName="Name" required class="signupForm_input " [(ngModel)]="name" id="login-name" placeholder="Your Name"><br>
          <div *ngIf="name.touched && name.errors" class="errorMessage">
            <span *ngIf="name.hasError('required')">UserName is required.</span>
            <span *ngIf="name.hasError('maxlength')">Only 10 characters allowed for UserName.</span>
            <span *ngIf="name.hasError('minlength')">Atleast 5 characters needed for UserName.</span>
          </div>
        </div>
        <div class="form-group">
          <div class="input_text"><span>Email</span></div>
          <input type="Email" formControlName="email" class="signupForm_input " [(ngModel)]="email" id="login-email" placeholder="Your Email"><br>
          <div *ngIf="email.touched && email.errors" class="errorMessage">
            <span *ngIf="email.hasError('required')">Email is required.</span>
            <span *ngIf="email.hasError('email')">Please provide valid email.</span>
          </div>
        </div>

        <div class="form-group">
          <div class="input_text"><span>Phone Number</span></div>
          <input type="Phone" formControlName="phone" class="signupForm_input" [(ngModel)]="phone" id="login-phone" placeholder="Phone Number"><br>
          <div *ngIf="phone.touched && phone.errors" class="errorMessage">
            <span *ngIf="phone.hasError('required')">phone no is required.</span>
            <span *ngIf="phone.hasError('phone')">Please provide valid phone no.</span>
          </div>
        </div>

        <div class="form-group">
          <div class="input_text"><span>Password</span></div>
          <input type="Password" formControlName="password" class="signupForm_input" [(ngModel)]="password" id="login-password" placeholder="Password"><br>
          <div *ngIf="password.touched && password.errors" class="errorMessage">
            <span *ngIf="password.hasError('required')">Password is required.</span>
            <span *ngIf="password.hasError('maxlength')">Only 10 characters allowed for password.</span>
            <span *ngIf="password.hasError('minlength')">Atleast 5 characters needed for password.</span>
          </div>
        </div>

        <div class="form-group">
          <div class="input_text"><span>Confirm Password</span></div>
          <input type="confirm" formControlName="confirmpassword" class="signupForm_input" [(ngModel)]="cpassword" id="login-confirmpassword" placeholder="Confirm Password"><br>
          <div *ngIf="cpassword.touched && cpassword.errors" class="errorMessage">
            <span *ngIf="cpassword.hasError('required')">Confirm Password is required.</span>
            <span *ngIf="cpassword.hasError('mustMatch')">Password Must Match.</span>
          </div>
        </div>

          <button [disabled]="valueform.invalid" class="submit" >SUBMIT</button><br>
        <button (click) ="gotoLogin()" class="login">LOGIN</button>
        <div class="terms">
          <span>By signing up you are agreeing our poilcy <a href="Privacy">Privacy </a>&<a href="terms">Terms.</a></span>
        </div>
      </div>
    </form>

Answer 1

Он будет действовать, если вы все испортили.

ваша formcontrolName - это «имя пользователя», и вы проверяете валидацию, как если бы коснулись «имени». Аналогично для confirmmpassword.

https://angular.io/guide/reactive-forms

formcontrolName уже существует, поэтому в этом простом случае нет необходимости использовать [(ngModel)] = "phone". Предпочитайте использовать либо реактивный, либо шаблон, а не смешивать оба.

{ ссылка }

<form class="individual-form" method="post" [formGroup]="valueform" (ngSubmit)="onSubmit()">
        <div class="input_tab" >
          <div class="form-group">
            <div class="input_text"><span>Name</span></div>
            <input type="text" formControlName="name" required class="signupForm_input "  id="login-name" placeholder="Your Name"><br>
            <div *ngIf="name.touched && name.errors" class="errorMessage">
              <span *ngIf="name.hasError('required')">UserName is required.</span>
              <span *ngIf="name.hasError('maxlength')">Only 10 characters allowed for UserName.</span>
              <span *ngIf="name.hasError('minlength')">Atleast 5 characters needed for UserName.</span>
            </div>
          </div>
          <div class="form-group">
            <div class="input_text"><span>Email</span></div>
            <input type="email" formControlName="email" class="signupForm_input "  id="login-email" placeholder="Your Email"><br>
            <div *ngIf="email.touched && email.errors" class="errorMessage">
              <span *ngIf="email.hasError('required')">Email is required.</span>
              <span *ngIf="email.hasError('email')">Please provide valid email.</span>
            </div>
          </div>

          <div class="form-group">
            <div class="input_text"><span>Phone Number</span></div>
            <input type="Phone" formControlName="phone" class="signupForm_input"  id="login-phone" placeholder="Phone Number"><br>
            <div *ngIf="phone.touched && phone.errors" class="errorMessage">
              <span *ngIf="phone.hasError('required')">phone no is required.</span>
              <span *ngIf="phone.hasError('phone')">Please provide valid phone no.</span>
            </div>
          </div>

          <div class="form-group">
            <div class="input_text"><span>Password</span></div>
            <input type="password" formControlName="password" class="signupForm_input"  id="login-password" placeholder="Password"><br>
            <div *ngIf="password.touched && password.errors" class="errorMessage">
              <span *ngIf="password.hasError('required')">Password is required.</span>
              <span *ngIf="password.hasError('maxlength')">Only 10 characters allowed for password.</span>
              <span *ngIf="password.hasError('minlength')">Atleast 5 characters needed for password.</span>
            </div>
          </div>

          <div class="form-group">
            <div class="input_text"><span>Confirm Password</span></div>
            <input type="confirm" formControlName="cpassword" class="signupForm_input"  id="login-confirmpassword" placeholder="Confirm Password"><br>
            <div *ngIf="cpassword.touched && cpassword.errors" class="errorMessage">
              <span *ngIf="cpassword.hasError('required')">Confirm Password is required.</span>
              <span *ngIf="cpassword.hasError('mustMatch')">Password Must Match.</span>
            </div>
          </div>

            <button [disabled]="valueform.invalid" class="submit" >SUBMIT</button><br>
          <button (click) ="gotoLogin()" class="login">LOGIN</button>
          <div class="terms">
            <span>By signing up you are agreeing our poilcy <a href="Privacy">Privacy </a>&<a href="terms">Terms.</a></span>
          </div>
        </div>
      </form>

In Ts: -

   ngOnInit() {
        this.name = new FormControl('', [Validators.required]);
        this.phone = new FormControl('', [Validators.required]);
        this.password = new FormControl('', [Validators.required]);
        this.cpassword = new FormControl('',[Validators.required]);
        this.email = new FormControl('', [Validators.required]);
        this.errorList = [];

        this.valueform = this.formBuilder.group(
          {
            'name': this.name,
            'email': this.email,
            'phone': this.phone,
            'password': this.password,
            'cpassword': this.cpassword,
          });
      }

Исправленное сопоставление в тс и html. Сообщите мне, если проблема не исчезнет.

Answer 2

Вам нужно добавить type="submit", потому что, если мы не добавим тип, по умолчанию это будет type="button"

<button type="submit" [disabled]="valueform.invalid" class="submit">SUBMIT</button>

Answer 3

попробуйте это

<button type="submit" [disabled]="!valueform.valid" class="submit">SUBMIT</button>

Надеюсь, это поможет.

Answer 4

Во-первых, вы не должны использовать formControlName и ngModel вместе, поскольку они устарели в обновлениях Angular.

Поскольку вы используете при отправке, вы должны явно определить тип кнопки.

<button [disabled]="valueform.invalid" class="submit" type="submit">SUBMIT</button>

Если вы все еще сталкиваетесь с проблемами, это связано с валидаторами форм.