Question

我不知道问题是什么。不过，当我在localhost上运行时，我看到一条警告文本，提示“需要电子邮件”。基于以下事实：选中此复选框时，应要求输入电子邮件，但不是=则不需要。

app.component.ts

import {Component,OnInit} from '@angular/core';
import {FormGroup,FormControl,FormBuilder,Validators} from '@angular/forms';
import {forbiddenNameValidator} from './shared/name.validator';
import {PasswordValidator} from './shared/password.validator';

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

    get userName() {
        return this.registrationForm.get('userName');
    }
    get passPro() {
        return this.registrationForm.get('password');
    }
    get conPro() {
        return this.registrationForm.get('confirmPassword');
    }
    get email() {
        return this.registrationForm.get('email');
    }

    registrationForm: FormGroup;
    //adress: FormGroup;
    //Sposób 2 bardziej spakowany

    constructor(private fb: FormBuilder) {}

    ngOnInit() {
        this.registrationForm = this.fb.group({
            userName: ['', [Validators.required, Validators.minLength(512), forbiddenNameValidator(/password/)]],
            password: ['', [Validators.required, Validators.minLength(512)]],
            confirmPassword: ['', [Validators.required, Validators.minLength(512)]],
            adress: this.fb.group({
                name: [''],
                surname: [''],
                email: [''],
                dateB: [''],
                adres: [''],
                city: [''],
                postalCode: [''],
                subscribe: [false]
            })
        }, {
            validator: PassworrdValidator
        });

        this.registrationForm.get('subscribe').valueChanges
            .subscribe(checkedValue => {
                const email = this.registrationForm.get('email');
                if (checkedValue) {
                    email.setValidators(Validators.required);
                } else {
                    email.clearValidators();
                }
                email.updateValueAndValidity();
            });

    }
}

app.component.html 的一部分-仅来自adress：this.fb组

<h2>Dane użytkownika</h2>
<div formGroupName="adress">
    <div class="form-group">
        <label>Name</label>
        <input formControlName="name" type="text" class="form-control">
    </div>
    <div class="form-group">
        <label>Surname</label>
        <input formControlName="surname" type="text" class="form-control">
    </div>
    <div class="form-group">
        <label>Birthdate</label>
        <input formControlName="dateB" type="text" class="form-control">
    </div>
    <div class="form-group">
        <label>Adres</label>
        <input formControlName="adres" type="text" class="form-control">
    </div>
    <div class="form-group">
        <label>Postal Code</label>
        <input formControlName="postalCode" type="text" class="form-control">
    </div>
    <div class="form-group">
        <label>City</label>
        <input formControlName="city" type="text" class="form-control">
    </div>
    <div class="form-group">
        <label>Email adress</label>
        <input [class.is-invalid]="email.invalid && email.touched" formControlName="email" type="text"
            class="form-control">
        <small class="text-danger" [class.d-none]="email.valid || email.untouched">Email is required</small>
    </div>
    <div class="form-check mb-3">
        <input class="form-control-check" formControlName="subscribe" type="checkbox">
        <label class="form-check-label">
            Send me promotional offers.
        </label>
    </div>
    <div class="form-check mb-3">
        <input class="form-control-check" formControlName="subscribe" type="checkbox">
        <label class="form-check-label">
            I accept the terms and conditions.
        </label>
    </div>
</div>

TypeError：无法读取null的属性“无效”
AppComponent.ngOnInit上的
属性'valueChanges'为空
和CONTEX错误
为什么出现？天哪，输入在这里不起作用。.

Angular中的验证问题。带有电子邮件输入的复选框

0 个答案: