Я использую регистрационную форму для добавления сотрудника .. и использую проверку для этого. но по какой-то причине это дает мне ошибку

"не могу прочитать свойство 'valid' из undefined"

Это мой код

HTML

<div  class="container" style="background-color: gainsboro;">

    <form [formGroup]="registerForm" #form=ngForm (ngSubmit)="f.form.valid && onSubmit(form.value)">
        <div class="form-row">
        <div class="form-group col-xs-6 col-sm-6">
            <br>
            <select formControlName="jobid" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.jobid.errors }">
                <option value="">Select Job</option>
                <option *ngFor="let item of this.jobList" value="{{item.id}}">{{item.name}}</option>
            </select>
            <div *ngIf="submitted && f.jobid.errors" class="invalid-feedback">
                <div *ngIf="f.jobid.errors.required">Job is required</div>
            </div>
        </div>
        <div class="form-group col-xs-6 col-sm-6">
            <br>
            <input type="date" placeholder="Joining Date" formControlName="date" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.date.errors }" />
            <div *ngIf="submitted && f.date.errors" class="invalid-feedback">
                <div *ngIf="f.date.errors.required">Joining Date is required</div>
            </div>
        </div> 
    </div>

        <div class="form-row">

            <div class="form-group col-xs-6 col-sm-6">
                <br>
                <input type="text" placeholder="First Name" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }"  pattern="[a-zA-Z][a-zA-Z\s]*"/>
                <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
                    <div *ngIf="f.firstName.errors.required">First Name is required</div>
                    <div *ngIf="f.firstName.errors.pattern">Please enter a correct name</div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6">
                <br>
                <input type="text" placeholder="Last Name" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }"  pattern="[a-zA-Z][a-zA-Z\s]*"/>
                <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
                    <div *ngIf="f.lastName.errors.required">Last Name is required</div>
                    <div *ngIf="f.lastName.errors.pattern">Please enter a correct name</div>

                </div>
            </div>
        </div>

         <button type="submit" class="btn btn-outline-success btnborder">Register</button>


    </form>
</div>

Ts файл


export class NewEmployeeComponent implements OnInit {
  registerForm: FormGroup;
  submitted = false;
  constructor(private formBuilder: FormBuilder,private service:NewEmployeeService) { 
    this.getJobs()
  }
  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      jobid: ['', Validators.required],
      firstName: ['', Validators.required],
      date: ['', Validators.required],
      lastName: ['', Validators.required],

  }, {
      // validator: MustMatch('password', 'confirmPassword')
  });
  }

 get f() { return this.registerForm.controls; }

 onSubmit(event:any) {

    console.log(event)
     this.submitted = true;

     // stop here if form is invalid
     if (this.registerForm.invalid) {
          return;
      }
    Swal.fire("Successfull","New employee registration is successfull","success")
 }
  public jobList:any=[]
  public getJobs()
  {
    this.service.getJobList().subscribe(data=>{
      this.jobList=data;
    })
  }

}

Всякий раз, когда я использую этот код < Сильный > < EM> ( ngSubmit ) = " onSubmit ( form.value ) " проверка работает, а также нулевое значение проходит ..

Когда я использую это

(ngSubmit) = "f.valid && (ngSubmit)"

Проверка не работает и функция отправки тоже не работает

И это эта ошибка показывает

enter image description here

0
NrJ 9 Янв 2020 в 09:12

3 ответа

Лучший ответ

Вы получили сообщение об ошибке, потому что get f(){...} не возвращает FromGroup. Он возвращает controls объект FromGroup, и у этого объекта не определен атрибут form. И из-за этого вы получаете сообщение об ошибке Cannot read property 'valid' of undefined.

Вы должны использовать ваш FormGroup напрямую:

(ngSubmit)="registerForm.valid && onSubmit(form.value)"

Обновление:

Как я вижу из предоставленного вами стекаблица, проверка работает. Ваш класс ошибок is-invalid применяется только в том случае, если форма отправлена, что вы делаете, когда форма недействительна.

Таким образом, вы должны изменить применение вашего класса ошибок или добавить другое логическое значение, для которого установлено значение true, когда вы нажимаете кнопку отправки.

Первый вариант

[ngClass]="{ 'is-invalid': f.jobid.errors }"

Второй вариант (рекомендуется imo)

В вашем HTML:

(ngSubmit)="onSubmit(form.value)"

И в вашем компоненте:

onSubmit(event:any) {

    console.log(event)
    this.submitted = true;

    // stop here if form is not valid
    // RECOMMENDATION Use !FromGroup.valid, because with async validation neither valid nor invalid is set
    if (!this.registerForm.valid) {
      return;
    }
    Swal.fire("Successfull","New employee registration is successfull","success")

}

В этом случае представленный флаг установлен в true, и ваш класс ошибок применяется правильно.

0
Batajus 9 Янв 2020 в 06:59

Просто удалите условие registerForm.valid из своего события (ngSubmit) внутри тега form. Это условие не позволяет вам отправить форму, и ваши проверки не работают.

Просто напишите:

(ngSubmit)="onSubmit(form.value)"
0
Jameer Khan 9 Янв 2020 в 06:57

Проблема с приведенным ниже кодом get f () {return this.registerForm.controls; } изменить, чтобы вернуть this.registerForm

0
akhila nair 9 Янв 2020 в 06:49