javascript - Angular reactive form based on model with validation - Stack Overflow

admin管理员组

文章数量:1315982

Is there a way to create a reactive form basing on an existing data model with all the validation magic. In the example below author passes whole new object into a formbuilder but what I want to achieve is elegant way to tell formbuilder what field is required or needs some other validation.

export class PersonalData {
  email: string = '';
  mobile: string = '';
  country: string = '';
}
...
createFormGroupWithBuilderAndModel(formBuilder: FormBuilder) {
    return formBuilder.group({
      personalData: formBuilder.group(new PersonalData()),
      requestType: '',
      text: ''
    });
  }

I just want to skip the process of assigning a FormControl for each field in the model.

@EDIT

After some research and little hint from @xrobert35 I wanted to try and used /@rxweb/reactive-form-validators

Is there a way to create a reactive form basing on an existing data model with all the validation magic. In the example below author passes whole new object into a formbuilder but what I want to achieve is elegant way to tell formbuilder what field is required or needs some other validation.

https://malcoded./posts/angular-fundamentals-reactive-forms

export class PersonalData {
  email: string = '';
  mobile: string = '';
  country: string = '';
}
...
createFormGroupWithBuilderAndModel(formBuilder: FormBuilder) {
    return formBuilder.group({
      personalData: formBuilder.group(new PersonalData()),
      requestType: '',
      text: ''
    });
  }

I just want to skip the process of assigning a FormControl for each field in the model.

@EDIT

After some research and little hint from @xrobert35 I wanted to try and used https://www.npmjs./package/@rxweb/reactive-form-validators

• javascript
• angular
• angular-reactive-forms

Share Improve this question Follow edited Jul 22, 2021 at 18:44 Alireza Ahmadi 9,95388 gold badges2525 silver badges6161 bronze badges asked Sep 21, 2018 at 11:31 HagalazHagalaz 10944 silver badges1414 bronze badges 1

• I wish the form was just bindings directly to my model, and the constraints were just made as html-attributes. I have a rather plicated model, and it requires so much boiler-plate to go model-to-form and back form-to-model. For editing an existing model, I'm storing references back to the original entity. Not sure if there's a cleaner way. :/ – Jeppe Commented Aug 17, 2022 at 17:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

They could be "many" way to do what you want to do, but by just extending your actual solution : Your personnal data could look like :

export class PersonalData {
  email: string = ['', Validators.required];
  mobile: string = ['', Validators.required, Validators.maxLength(10)];
  country: string = '';
}

If you need domain base validation (for reusable purpose) you can use rxweb validations.

export class PersonalData {
    @required()
    email: string;

    @required()
    mobile: string;    

    @greaterThan({ fieldName: 'number2' })
    number1: number;
    
    @prop()
    number2: number;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.ponent.html',
    styleUrls: ['./app.ponent.css']
})
export class AppComponent implements OnInit {
    formGroup: FormGroup;
    constructor( private validation: RxFormBuilder) {
    }

    ngOnInit() {      
        let person: PersonalData = new PersonalData();
        this.formGroup = this.validation.formGroup(person);
    }

}

If I understand you just want to add validators to your field.

https://angular.io/guide/form-validation

I can't be more precise to giving you the official documentation.

ngOnInit(): void {
  this.heroForm = new FormGroup({
    'name': new FormControl(this.hero.name, [
      Validators.required,
      Validators.minLength(4),
      forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
    ]),
    'alterEgo': new FormControl(this.hero.alterEgo),
    'power': new FormControl(this.hero.power, Validators.required)
  });

}

In this exemple the fields name and power are required and of course the syntaxe could differ but the flow is the same.

Does it helps you ?

@EDIT There is the same post for your use case: https://stackoverflow./a/47576916/7133262

本文标签： javascriptAngular reactive form based on model with validationStack Overflow