Форма Angular 7 и флажок Bootstrap подтверждают форму, когда она отмечена, но не аннулируется, если она не отмечена

У меня есть регистрационная форма с флажком для T of S. Кнопка «Регистрация» (форма) активируется, когда форма действительна, и отключается, когда она недействительна. Я могу заполнить форму и установить флажок, и кнопка регистрации становится доступной/активной. Таким образом, форма действительна, но когда я снимаю ее, кнопка регистрации остается включенной/активной, и форма остается действительной. Он не становится недействительным!

К вашему сведению, я добавил пару операторов во входное «имя» и «[проверено]», чтобы посмотреть, заставит ли это работать, но мне не повезло.

Вот моя форма и часть кода .ts. Некоторый код опущен, чтобы сделать его кратким.

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit, AfterViewInit {
  // some variables here removed
  registerForm: FormGroup;
  bsConfig: Partial<BsDatepickerConfig>;
  terms = false;
  
  

  constructor(private authService: AuthService, private router: Router,
              private alertService: AlertService, private fb: FormBuilder, private zone: NgZone) {}

  ngOnInit() {
    this.bsConfig = {
      containerClass: 'theme-red'
    };
    this.createRegisterForm();
  }
  
  createRegisterForm() {
    this.registerForm = this.fb.group({
      terms: ['', Validators.required],
    });
  }
<form [formGroup]="registerForm" (ngSubmit)="register()">
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" id="gridCheck" 
         [ngClass]="{'is-invalid': registerForm.get('terms').errors && registerForm.get('terms').touched}" 
         name="terms" 
         type="checkbox"  
         formControlName="terms">
      <label class="form-check-label" for="gridCheck">Agree to terms</label>
    </div>
  </div>

  <div class="form-group text-center">
    <button class="btn btn-yb w-100" [disabled]="!registerForm.valid" type="submit">
        <span *ngIf="loadingRegister" class="spinner-border spinner-border-sm color-yb-white" role="status" aria-hidden="true"></span>
        <span class="sr-only">Loading...</span>
        <span *ngIf="!loadingRegister">Register</span>
    </button>
  </div>
</form>


typescript angular twitter-bootstrap angular-forms angular-validation
person user1186050    schedule 02.10.2019    source источник
comment
Привязки управления терминами к входным данным через formControlName должно быть достаточно. Не нужно привязывать [checked] к нему. На самом деле я подозреваю, что это может быть проблемой.   -  person John Gallego    schedule 03.10.2019
comment
да пробовал без. Только что попробовал еще раз, и по-прежнему нет возможности аннулировать форму при снятии флажка. Мне просто интересно, стоит ли вместо этого попробовать использовать элемент ngx-bootstrap? Я не думаю, что это имеет значение, но? удалю из ОП   -  person user1186050    schedule 03.10.2019

Ответы (1)


arrow_upward
1
arrow_downward

А, не видел раньше:

Вам необходимо использовать Validators.requiredTrue, чтобы элемент управления флажком работал правильно.

person John Gallego    schedule 02.10.2019
comment
ах ха! Я новичок в Angular и не знал, что это новичок. Спасибо! - person user1186050; 03.10.2019