Angular2使用預填充數據的表單驗證

我有一個帶有兩個輸入字段（文本）的表單。從頭開始創建（=沒有信息）很好。正如你所猜測的，也許我想稍後改變這些值。Angular2使用預填充數據的表單驗證

問題：如果只改變描述（例如離開服務器的標題），標題將是無效的。如果我更改最後一個字符（Testproject爲Testproject2），例如它可以工作。我需要改變什麼？

模板：

<form [formGroup]="projectEditForm" novalidate> 
    <div [formGroup]="projectEditForm"> 

     <label>Title</label> 
     <input type="text" [class.validationError]="projectEditForm.controls.Title.invalid && (projectEditForm.controls.Title.dirty || submitted)" 
        value="{{ (project | async)?.ProjectName }}" formControlName="Title"> 

     <label>Description</label> 
     <textarea [class.validationError]="projectEditForm.controls.Description.invalid && (projectEditForm.controls.Description.dirty || submitted)" 
        value="{{ (project | async)?.Description }}" formControlName="Description"></textarea> 
    </div> 
</form>

表型號：

this.projectEditForm = this._fb.group({ 
    Title: ['', [<any>Validators.required, <any>Validators.minLength(5)]], 
    Description: ['', [<any>Validators.required]] 
});

來源

2017-01-06 sandrooco

如果您想要更具體的答案，請爲http調用添加代碼。 – n00dl3

你的問題來自於一個事實，即您沒有正確使用FormControl。您不應該綁定到input標記的value屬性，因爲它是FormControl的工作。

當綁定到value屬性時，您正在寫入dom，但未通知FormControl某些內容已更改。

您應該使用FormControl來動態設置值。當您收到來自HTTP的數據，你只需要調用這個：

this.projectEditForm.get("controlName").setValue(randomValueFromSomewhere);

在你的模板（注意，我刪除了類更簡潔）：

<div [formGroup]="projectEditForm"> 
    <label>Title</label> 
    <input type="text" formControlName="Title"> 
    <label>Description</label> 
    <textarea formControlName="Description"></textarea> 
</div>

來源

2017-01-06 13:57:07 n00dl3

-1

嘗試初始化對HTTP調用成功表格組，然後：

this.projectEditForm = this._fb.group({ 
    Title: [project.ProjectName, [<any>Validators.required, <any>Validators.minLength(5)]], 
    Description: [project.Description, [<any>Validators.required]] 
});

來源

2017-01-06 13:44:15

按需創建表單需要模板中額外的邏輯（'* ngIf =「projectEditForm」'），聽起來不是一個好主意。 – n00dl3

您的標題條件輸入類是無效

[class.validationError]="projectEditForm.controls.Name.invalid && (projectEditForm.controls.Description.dirty || submitted)"

它應該是：

[class.validationError]="projectEditForm.controls.Title.invalid && (projectEditForm.controls.Title.dirty || submitted)"

來源

2017-01-06 14:01:19 Gbac

沒錯，我更改了問題的名稱，所以在我的代碼中，對錯了。 – sandrooco

Angular2使用預填充數據的表單驗證

回答

相關問題