一直在嘗試訪問表單實體值，但它們都是空的。它在模板驅動的表單中運行良好。我已經匯入了 ReactiveFormsModule。我玩過attr，但找不到丟失的東西？表單在我使用 Validators.required 時無效，這意味著它是空的
.component.html
<form [formGroup] ="tryForm" (ngSubmit)="onSubmit()" >
<div class="form-group">
<label>Name</label><br>
<input type="text" FormControlName ="name">
<span *ngIf="tryForm.invalid">Name required</span>
</div>
<!-- <div *ngIf="name.invalid" ></div> -->
<div class="form-group">
<label>Email</label><br>
<input type="text" FormControlName ="email">
</div>
<div class="form-group">
<label>Message</label><br>
<input type="text" FormControlName ="message">
</div>
<button type = "submit" >Submit</button>
</form>
.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl,FormGroup,Validators} from '@angular/forms';
import { Router} from '@angular/router'
@Component({
selector: 'app-log-in',
templateUrl: './log-in.component.html',
styleUrls: ['./log-in.component.css']
})
export class LogInComponent implements OnInit {
tryForm = this.fb.group({
name : [''],
email: [''],
message: [''],
});
constructor(private fb:FormBuilder,
private router: Router) { }
onSubmit(){
if (this.tryForm.status == "VALID"){
alert("Form Submitted Successfully.")
alert(this.tryForm.get("name")?.value);
this.tryForm.reset();
uj5u.com熱心網友回復：
首先，您需要將 html 更改FormControlName為formControlName. 你可以在這里閱讀完整的解釋。
HTML
<form [formGroup]="tryForm" (ngSubmit)="onSubmit(tryForm.value)">
<div class="form-group">
<label>Name</label><br />
<input type="text" formControlName="name" />
<span *ngIf="tryForm.invalid">Name required</span>
</div>
<div class="form-group">
<label>Email</label><br />
<input type="text" formControlName="email" />
</div>
<div class="form-group">
<label>Message</label><br />
<input type="text" formControlName="message" />
</div>
<button type="submit">Submit</button>
</form>
之后像下面這樣改變你的 ts，確保你在ngOnInit.
TS
export class LogInComponent implements OnInit {
tryForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.createForm();
}
createForm() {
this.tryForm = this.fb.group({
name : [''],
email : [''],
message: [''],
});
}
onSubmit(data) {
console.log(data);
}
}
我在這里復制你的代碼
uj5u.com熱心網友回復：
把這個改成<input type="text" FormControlName ="email"> 這個；
<input type="text" formControlName="email">
并在 ngOnInit 上構建您的表單，
ngOnInit(){
this.tryForm = this.fb.group({
name : [''],
email: [''],
message: [''],
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/416724.html
標籤：