Angular2 Form Validation with Pre-populated Data

Question

I have a form with two input fields (text). Creating from scratch (= no information) works fine. As you can guess, maybe I want to change the values ​​later.

Problem: if you only change the description, for example (and leave the title as it is on the server), the title will be invalid. If I change the last char (Testproject to Testproject2), for example, it works. What do i need to change?

Template:

<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>

Model model:

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

Answer 1

, FormControl . value input, 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>

Answer 2

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

:

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

Answer 3

http-, :

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